D3多系列折线图答案

【问题标题】：D3 multi series line graphD3多系列折线图
【发布时间】：2014-10-12 02:16:34
【问题描述】：

多年来，我正在尝试根据来自多个国家/地区的几类数据创建线+散点图。

问题在于折线图从一个数据类别延续到下一个数据类别。我查看了来自http://bl.ocks.org/mbostock/3884955 的示例，但不太明白我需要实施哪些更改。

我应该使用元素来分隔数据吗？或者，有没有更简单的方法来做到这一点？

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,

【问题讨论】：

标签： d3.js scatter-plot linegraph

【解决方案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); });

城市数组的数据结构如下：

纽约 -> 数组[...]

旧金山 -> 数组[...]

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

详情见下图：

希望对你有帮助。

【讨论】：