不能画多条线

Question

我试着在一张图上画几条线：

self.draw = function(data) {
    self.clear();
    self.createRanges(data);
    self.drawLines(data);
    self.drawAxes(data);
    self.drawLegend();
};

self.drawLines = function(data){
    var line = d3.svg.line()
        .x(function(datum){
            return self.xRange(datum.classification);
        })
        .y(function(datum){
            return self.yRange(datum.value);
        })
        .interpolate("linear");
    self.vis.selectAll(".line").data(data).enter()
         .append("path")
             .attr("class", "line")
             .attr("d", line)
             .attr("stroke", "blue")
             .attr("stroke-width", 2)
             .attr("fill", "none");
};

数据如下：

var data = [
        {
            category: 0,
            classification: "10-09",
            value: 10.6
        }, {
            category: 1,
            classification: "10-09",
            value: 11.2
        },


        {
            category: 0,
            classification: "10-10",
            value: 10.3
        }, {
            category: 1,
            classification: "10-10",
            value: 13.0
        }
];

但没有线条出现。没有错误，图形轴绘制成功。我可以使用整个data作为这条线的坐标，并将其直接附加到self.vis，但当移动到多行情况时，没有绘制任何线。

Answer 1

您的数据不是直接绘制多条线的正确格式；为此，需要一个嵌套结构。您可以使用d3.nest()创建这个

var nested = d3.nest()
  .key(function(d) { return d.category; })
  .entries(data);

这样你就可以直接用它来画出这样的线：

vis.selectAll("path.line").data(nested)
  .enter().append("path")
  .attr("class", "line")
  .attr("d", function(d) { return line(d.values); });

完整的演示这里。