使用d3绘制路径？

Question

我正在尝试使用d3生成路径并按数据集设置颜色。 路径的颜色由“ Req”设置，绘制路径由点集设置，但是在获取数据时我遇到了一些解析问题。 我的数据格式如下所示。

var feature = {"section":[
  {"ID": 1,"Req": 10,"Name": "Jame","point": [{"x": 1,"y": 1},{"x": 5,"y": 5},{"x": 20,"y": 30},{"x": 200,"y": 200}]},
  {"ID": 2,"Req": 20,"Name": "John","point": [{"x": 1,"y": 1},{"x": 7,"y": 10},{"x": 100,"y": 10},{"x": 20,"y": 200}]}  
]};

为了获得数据集中的x和y坐标，我具有以下行生成器的功能：

var line = d3.svg.line()
     .interpolate("linear")
     .x(function(d) { d.point.forEach(function(a){ return a.x;});})
     .y(function(d) { d.point.forEach(function(a){ return a.y;});});

我在数据集中将路径的样式颜色设置为“ Req”。

canvas.selectAll("path")
    .data(feature.section)
    .enter()
    .append("path")
    .attr("d", line(feature.section))
    .attr("fill", "none")
    .style("stroke", function(d) {
       var returnColor;
       if (d.Req > 5){returnColor ="green";}
       else if (d.Req > 10){returnColor ="purple";}
       else if (d.Req > 15){returnColor ="red";}
       else{returnColor = "#ccc";}
       return returnColor;
    });

但是我没有在屏幕上显示任何线条。 调试控制台始终显示错误：解析d =“ MNaN，NaNLNaN，NaNLNaN，NaNLNaN，NaNLNaN，NaNLNaN，NaN”时出现问题。

我错过了什么？

您还可以在http://jsfiddle.net/agadoo/RZQxV/上看到我的代码示例。

Answer 1

看来您要画几条路径，每个请求ID一条。 在这种情况下，您需要的是嵌套选择 。

要绘制路径，您需要将一个数组传递给.data()函数，并在d3.svg.line()定义中提供x和y函数，以从该数组的每个元素中提取相关数据。 也就是说，您在此处指定的函数应返回恰好一个点的x和y坐标。 因此，您将其更改为类似

.x(function(d) { return d.x; })

我在这里修改了您的jsfiddle。 请注意，在这种情况下，您无法再以与以前相同的方式获得线条的颜色，因为该数据在该级别上不可用。 有多种方法可以解决此问题，最直接的方法可能是重新格式化数据。 d3数组函数（特别是d3.nest()函数 ）在这里应该会有所帮助。

最后，设置线条颜色的检查无法按预期进行。 d.Req > 5为真，如果d.Req > 10 ，所以你的第二个和第三个条件永远不会，因为他们已经被第一个覆盖满足。