d3中json数据的折线图答案

【问题标题】：line chart of json data in d3d3中json数据的折线图
【发布时间】：2015-01-24 17:53:07
【问题描述】：

我正在学习 d3。我想使用 json 数据制作折线图。我使用的数据是：

var data = [
    { "at": "2014-11-18T07:29:03.859Z", "value": 0.553292},
    { "at": "2014-11-18T07:28:53.859Z", "value": 0.563292},
    { "at": "2014-11-18T07:28:43.859Z", "value": 0.573292},
    { "at": "2014-11-18T07:28:33.859Z", "value": 0.583292},
    { "at": "2014-11-18T07:28:13.859Z", "value": 0.553292},
    { "at": "2014-11-18T07:28:03.859Z", "value": 0.563292}];

我想要 x 轴上的“at”和 y 轴上的“value”。此外，我只需要将“at”解析为时间。请给我指点我将如何进一步进行。到目前为止我已经实现的代码如下。我试图为此寻找文档，但没有找到。

<html>
    <head>
        <title>line chart on json</title>
        <script src="http://d3js.org/d3.v2.js"></script>
        <style>
            /* tell the SVG path to be a thin blue line without any area fill */
            path {
                stroke: steelblue;
                stroke-width: 1;
                fill: none;
            }
        </style>
    </head>
    <body>

    <script>

    var width = 400;
    var height = 150;

    var data = [
    { "at": "2014-11-18T07:29:03.859Z", "value": 0.553292},
    { "at": "2014-11-18T07:28:53.859Z", "value": 0.563292},
    { "at": "2014-11-18T07:28:43.859Z", "value": 0.573292},
    { "at": "2014-11-18T07:28:33.859Z", "value": 0.583292},
    { "at": "2014-11-18T07:28:13.859Z", "value": 0.553292},
    { "at": "2014-11-18T07:28:03.859Z", "value": 0.563292}]; 

    var x = d3.scale.ordinal(); 

    var y = d3.scale.linear().range([height, 0]);
    var xAxis = d3.svg.axis().scale(x).orient("bottom"); 
    var line = d3.svg.line()
        .x(function(d) { return x(d.at);})
        .y(function(d) { return y(d.value); })
        .interpolate("linear")
    var graph = d3.select(graph1).append("svg:svg").attr("width", "300").  attr("height", "150");
    function make_y_axis() {
        return d3.svg.axis().scale(y).orient("left").ticks(5)
    }

    </script>

    </body>
</html>

【问题讨论】：

标签： javascript json d3.js

【解决方案1】：

下面一行中的graph1是什么：

var graph = d3.select(graph1).append("svg:svg").attr("width", "300"). attr("身高", "150");

【讨论】：

【解决方案2】：

看这个例子http://bl.ocks.org/crayzeewulf/9719255

使用了 2 个图表，但您可以只使用一个并根据需要放置数据。

至于日期你可以看看这个例子http://jsfiddle.net/robdodson/KWRxW/，尤其是xAxis。

var xAxis = d3.svg.axis()
    .scale(x)
    .orient('bottom')
    .ticks(d3.time.days, 1)
    .tickFormat(d3.time.format('%a %d'))
    .tickSize(0)
    .tickPadding(8);

【讨论】：