D3多系列折线图

我试图在多年来来自多个国家的几类数据上创建线+散点图。D3多系列折线图

问题是线图从一个数据类别继续到下一个数据类别。我看着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,

来源

2014-10-12 user3562812

由于您粘贴的代码很少，我只是猜测，如果问题是您传递给图表的数据结构不正确。

在从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); });

城市阵列的数据结构是象下面这样：

纽约 - >数组[...]

圣弗兰 - >数组[...]

奥斯汀 - >数组[...]

见下图查看详细：

enter image description here

希望它能帮助。

来源

2014-10-13 02:38:33

D3多系列折线图

回答

相关问题