D3多系列折線圖

Question

我試圖在多年來來自多個國家的幾類數據上創建線+散點圖。

問題是線圖從一個數據類別繼續到下一個數據類別。 我看着http://bl.ocks.org/mbostock/3884955的一個exmaple，但並不完全明白我需要實現哪些更改。

我應該使用元素分離數據嗎？或者，有沒有簡單的方法來做到這一點？

var line = d3.svg.line() 

     .x(function(d) 
      {return xScale(d.Year); 
      }) 
     .y(function(d){ 
      return yScale(d.Value); 
      }) 

//附加圓圈爲散點圖

var circle = svg.selectAll('circle') 
     .data(data) 
     .enter() 
     .append("circle") 

//畫線。

svg.append('path') 
    .datum(data) 
    .attr("d",line) 
    .style("stroke","blue") 
    .style("stroke-width","1px") 
    .style("fill","none") 

// CSV數據文件的一部分。數據重複了幾個國家。

Variable,Unit,Country,Year,Value,Flags 
"Hepatitis B","% of children immunised","Australia","2001",94, 

"Hepatitis B","% of children immunised","Australia","2002",94, 

"Hepatitis B","% of children immunised","Australia","2003",95, 

"Hepatitis B","% of children immunised","Australia","2004",95, 

"Hepatitis B","% of children immunised","Australia","2005",95, 

"Diphtheria, Tetanus, Pertussis","% of children immunised","Australia","1980",33, 

"Diphtheria, Tetanus, Pertussis","% of children immunised","Australia","1981",40, 

"Diphtheria, Tetanus, Pertussis","% of children immunised","Australia","1982",48, 

"Diphtheria, Tetanus, Pertussis","% of children immunised","Australia","1983",55, 

"Diphtheria, Tetanus, Pertussis","% of children immunised","Australia","1984",62, 

"Measles","% of children immunised","Australia","1983",68, 

"Measles","% of children immunised","Australia","1984",68, 

"Measles","% of children immunised","Australia","1985",68, 

Answer 1

由於您粘貼的代碼很少，我只是猜測，如果問題是您傳遞給圖表的數據結構不正確。

在從http://bl.ocks.org/mbostock/3884955〔實施例中，圖表分類的城市中，傳遞到圖表的數據被分類城市陣列：

var city = svg.selectAll(".city") 
     .data(cities) 
    .enter().append("g") 
     .attr("class", "city"); 

city.append("path") 
    .attr("class", "line") 
    .attr("d", function(d) { return line(d.values); }) 
    .style("stroke", function(d) { return color(d.name); }); 

城市陣列的數據結構是象下面這樣：

紐約 - >數組[...]

聖弗蘭 - >數組[...]

奧斯汀 - >數組[...]

見下圖查看詳細：

希望它能幫助。