javascript nvd3 グラフ描画

時系列データを描画しました。マウスカーソルに合わせて滑らかに凡例も動きます。chart.xScale(d3.time.scale())として時系列データとして読み込ませないと、座標は全て数字にしないといけない点、chart.xAxis.tickFormat()の引数にd3.time.months()は使えないこと(nvd3に非対応)などは注意です。


データは、
D3.js チュートリアル:基本9 – csvとJSONファイルの読み込み - Data is fun.
にある
csvファイルをお借りしました。





<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.2/moment.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.css">
</head>

<body>
  <svg id="chart" style="width:500; height:500;"></svg>    
</body>

<script type="text/javascript">

    d3.csv("timeseries.csv", function(error, data){
        console.log(data)
        // create an empty object that nv is expecting
        var exampleData = [
            {
                key: "Closing Prices",
                // bar:true,
                values: []
            }
        ];

        // populate the empty object with your data
        data.forEach(function (d){
            var date = d3.time.format('%d-%b-%y').parse(d.date);
            var dateVal = Number(new Date(date.getTime()));
            var close = Number(d.close);
            exampleData[0].values.push({x:dateVal, y:close});
        });
        
        exampleData[0].values = exampleData[0].values.sort(function(a,b){
            return a.x-b.x;
        });

        var data =exampleData[0].values;

        nv.addGraph(function(){
            var chart = nv.models.lineChart()
                .margin({left:80, right:20, bottom:100, upper:20})
                .useInteractiveGuideline(true)
                .showLegend(true)
                .xScale(d3.time.scale())
                // .x(function(d){
                //     return exampleData[0].values.indexOf(d);
                // })
                .showYAxis(true)
                .forceY([50,700])
                .showXAxis(true)
                .noData('No data to display.')
                ;


            chart.xAxis
                .scale(d3.time.scale()
                              .domain([data[0].x, data[data.length-1].x])
                              .range([0,1024]))
                .orient("bottom")
                // .tickValues(data.map(function(d){return d.x;}))
                // .ticks(d3.time.months, 3)
                .rotateLabels(-30)
                .showMaxMin(false)
                .tickPadding(10)
                .axisLabel('Date')
                .tickFormat(function(d){
                    return d3.time.format('%b. %d, %Y')(new Date(d));
                    // return d3.time.format('%b. %d, %Y')(new Date(exampleData[0].values[d].x));
                })
                // .tickValues(d3.time.month.range(new Date("2007/07/01"), new Date("2012/05/01"), 3))
                ;
              
            chart.yAxis
                .axisLabel('USD ($)')
                .orient("left")
                .tickFormat(d3.format('.1f'));
             
            d3.select('#chart')
                .datum(exampleData)
                // .attr("id", function (d) { console.log(d); })
                // .transition()
                // .duration(500)
                .style({'width':1024,'height':768})
                .call(chart);
         
            nv.utils.windowResize(function() {
                chart.update();
              });

        return chart;
   });
 });

</script>
</html>



chart.xAxis.ticks(d3.time.monday)
が使えないとき。nvd3ではd3.time.monthsなどに対応していない。
d3.time.scale compatibility · Issue #145 · novus/nvd3 · GitHub



interective guidelineが末端しかポイントしないとき
chart.xのx座標配列には、x座標の配列の添字のみをいれ、chart.xAxis.tickFormat()でその添字を使ってx座標の配列から取得してくる。
javascript - NVD3 linechart tooltips not following the mouse - Stack Overflow

グラフとソースコードの例
Time series done right with NVD3 - JSFiddle

コメント

人気の投稿