D3.js D3多系列线图
我试图根据多年来来自几个国家的几类数据创建线条+散点图 问题是直线图从一个数据类别延续到下一个数据类别。 我查看了来自的exmaple,但不太了解需要实现哪些更改 我应该使用元素分离数据吗?或者,有没有更简单的方法D3.js D3多系列线图,d3.js,scatter-plot,linegraph,D3.js,Scatter Plot,Linegraph,我试图根据多年来来自几个国家的几类数据创建线条+散点图 问题是直线图从一个数据类别延续到下一个数据类别。 我查看了来自的exmaple,但不太了解需要实现哪些更改 我应该使用元素分离数据吗?或者,有没有更简单的方法 var line = d3.svg.line() .x(function(d) {return xScale(d.Year); }) .y(function(d){ return
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,
由于粘贴的代码很少,我猜问题在于传递给图表的数据结构是否不正确 在exmaple from(按城市分类的图表)中,传递到图表的数据为分类城市数组:
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); });
cities阵列的数据结构如下:
纽约->阵列[…]
旧金山->阵列[…]
奥斯汀->阵列[…]
详见下图:
希望能有帮助