Javascript 用d3绘制路径图？

我正在尝试使用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，NaNLNaN”

我错过什么了吗

---

您还可以在

上看到我的代码示例，看起来您正在尝试绘制多条路径，每个请求ID对应一条路径

要绘制路径，您需要将数组传递给

.data（）

函数，并在

d3.svg.line（）

定义中给出

x

和

y

函数，以从该数组的每个元素中提取相关数据。也就是说，您在那里指定的函数应该返回正好一个点的

x

和

y

坐标。所以你会把它们变成

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

我已经修改了你的JSFIDLE。请注意，在这种情况下，您无法再以相同的方式获取线条的颜色，因为该级别的数据不可用。有几种方法可以克服这个问题，最简单的方法可能是重新格式化数据。d3数组函数（特别是）在这里应该很有用

---

最后一点，设置线条颜色的检查不会像您预期的那样起作用<如果

d.Req>10

，则code>d.Req>5将为真，因此您的第二个和第三个条件将永远不会满足，因为它们已经包含在第一个条件中。

非常感谢，我将尝试嵌套函数。