如何使用d3js和json格式化为nvd3创建多行图表？

Question

I created a multiple-line chart using nvd3，但无法用一些重要的方式对其进行修改。我想用自己的d3js来推出我自己的，但是我在想加入。

我需要为每个d.key创建一个路径，并带有相应的d.values。

我的数据格式为nvd3如下（删节）。

[ 
    { 
     "key":"brw-a", 
     "values":[ 
      ["2012-07-11T00:00:00", 0.0 ], 
      ["2012-07-11T23:59:59", 0.0 ], 
      ["2012-07-05T06:31:47", 0.0 ], 
      ["2012-07-05T23:59:59", 0.0 ] 
     ] 
    }, 
    { 
     "key":"brw-c", 
     "values":[ 
      ["2012-07-11T00:00:00", 0.0 ], 
      ["2012-07-07T00:00:00", 2.0 ], 
      ["2012-07-05T23:59:59", 4.0 ] 
     ] 
    } 
] 

我似乎需要一个内部循环，以访问存储在每个d.values阵列。 I have a working example，演示d.values如何在一个无用的大环境中出现。

var p = d3.select("body").selectAll("p") 
     .data(data) 
     .enter().append("p") 
     .text(function(d) {return d.key +": " + '[' + d.values + ']'}) 

我觉得我很接近，而且它有事情做与：

.data(data, function(d) { return d.key; }) 

更新：我能够手动环比数据，以创建所需的效果。也许有没有办法与联合做到这一点？当然，除了使用美妙的nvd3 lib之外。请参阅下面的链接评论。

var body = d3.select("body") 

for (i=0; i < data.length; i++) { 
    var key = data[i].key 
    var values = data[i].values 

    body.append("h3") 
     .text(key) 

    for (j=0; j < values.length; j++) { 
     body.append("p") 
      .text(values[j][0] + " -- " + values[j][1]) 
    } 

} 

Answer 1

你是对的.data()函数。但是，因为你需要通过values元素循环，这就是你需要传递的数据嵌套的选择是什么：

.data(function(d) { return d.values}) 

你可以试试这个：

var p = d3.select("body").selectAll("p") 
     .data(data) 
     .enter().append("p") 
     .attr("id", function(d) { return d.key}) 
     .text(function(d) {return d.key}) 
      .selectAll("span") 
       .data(function(d) { return d.values}) 
       .enter().append("span") 
        .text(function(d) {return d}) 

产地：

<p id="brw-a">brw-a 
    <span>2012-07-05T00:00:00,0</span> 
    <span>2012-07-06T23:59:59,1</span> 
    <span>2012-07-07T06:31:47,0</span> 
    <span>2012-07-08T23:59:59,3</span> 
</p> 

<p id="brw-c">brw-c 
    <span>2012-07-11T00:00:00,0</span> 
    <span>2012-07-07T00:00:00,2</span> 
    <span>2012-07-05T23:59:59,4</span> 
</p>