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。在这种情况下，您需要nested selections。

要绘制路径，您可以将数组传递给.data()函数，并在x定义中提供y和d3.svg.line()函数，以从每个函数中提取相关数据该数组的元素。也就是说，您在那里指定的函数应该只返回x和y坐标。所以你会把它们变成类似

的东西

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

我修改了你的jsfiddle here。请注意，在这种情况下，您无法以与之相同的方式获取行的颜色，因为该数据在该级别不可用。有几种方法可以解决这个问题，最简单的方法是重新格式化数据。 d3数组函数（特别是d3.nest() functions）在这里应该会有所帮助。

最后一点，您设置线条颜色的检查将无法按预期工作。如果d.Req > 5，则d.Req > 10将为真，因此您的第二和第三个条件将永远不会被满足，因为它们已被第一个条件覆盖。

用d3绘制路径？

1 个答案: