如何使用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>