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

完整演示here。

无法绘制多条线

1 个答案: