D3绑定嵌套JSON文档的数据

我有以下格式的来自MongoDB的数据。我想创建一个这样的数据的多线图，类似于：http://bl.ocks.org/mbostock/3884955，X轴上的日期，Y轴上的持续时间以及每个作业都有自己的单独行。D3绑定嵌套JSON文档的数据

我对我的数据的嵌套性质很难 - 我已经做过一些简单的D3图表，但我不知道如何绑定和访问这些数据。我已经看到了Stackoverflow上的其他几个类似的例子（使用嵌套函数等），但我没有完全理解它，我不知道这是否是最好的解决方案。任何关于最佳方法的指针都会非常感谢。

{ 
     "result" : [ 
       { 
         "_id" : { 
           "month" : 1, 
           "day" : 20, 
           "year" : 2014, 
           "job" : "ABC" 
         }, 
         "build_duration" : 432565 
       }, 
       { 
         "_id" : { 
           "month" : 1, 
           "day" : 17, 
           "year" : 2014, 
           "job" : "ABC" 
         }, 
         "build_duration" : 543256 
       }, 
       { 
         "_id" : { 
           "month" : 1, 
           "day" : 17, 
           "year" : 2014, 
           "job" : "DEF" 
         }, 
         "build_duration" : 87634 
       }, 
       { 
        "_id" : { 
          "month" : 1, 
          "day" : 20, 
          "year" : 2014, 
          "job" : "DEF" 
        }, 
        "build_duration" : 456230 
       } 
       ], 
     "ok" : 1 
    }

来源

2014-01-20 JamesE

您发布的数据片段指定了我想要的一行代码？数据看起来像几行？ –

我添加了一些额外的数据 - 每一行都是工作元素。第1行= ABC和第2行= DEF。谢谢。 – JamesE

这是我要采取的方法。嵌套基于作业ID的数据，然后绘制嵌套数据。做嵌套的代码很简单，所有你需要的是

var nested = d3.nest().key(function(d) { return d._id.job; }) 
       .entries(data.result);

然后你就可以得出像这样（假设这里省略了变量的适当定义）。

svg.selectAll("path").data(nested) 
    .enter().append("path") 
    .style("stroke", function(d) { return color(d.key); }) 
    .attr("d", function(d) { return line(d.values); });

完整示例here。

来源

2014-01-20 16:36:06

谢谢 - 这非常有帮助。 – JamesE

D3绑定嵌套JSON文档的数据

回答

相关问题