在多行上添加點D3.js嵌套數據圖

Question

我是D3.js新手，需要一些幫助。

我從JSON數據生成的多行圖：

 "City": "New York", 
     "Data": [ 
      { 
       "Date": "20111001", 
       "Value": "63.4" 
      }, 
      { 
       "Date": "20111002", 
       "Value": "58.0" 
      }, 
... 
     ] 
    }, 
    { 
     "City": "San Francisco", 
     "Data": [ 
      { 
       "Date": "20111001", 
       "Value": "62.7" 
      }, 
      { 
       "Date": "20111002", 
       "Value": "59.9" 
      }, 

正如你在這裏http://jsfiddle.net/hapypork/JYS8n/66/它正在看。但是我想要點/圓和每個數據點，而不是像現在這樣，每個圖上只有3個點。我想我需要遍歷嵌套的數據。但是如何？

謝謝你幫助我。

Answer 1

需要在此nested selections：

svg.selectAll("g.dot") 
    .data(data) 
    .enter().append("g") 
    .attr("class", "dot") 
    .selectAll("circle") 
    .data(function(d) { return d.Data; }) 
    .enter().append("circle") 
    .attr("r", 6) 
    .attr("cx", function(d,i) { return x(d.Date); }) 
    .attr("cy", function(d,i) { return y(d.Value); }) 

完成演示here。