0

我正在尝试使用 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;
    });

但我没有在屏幕上显示线。调试控制台总是显示 Error: Problem parsing d="MNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaN"

我错过了什么？

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

4

1 回答 1

0

看起来您正在尝试绘制多条路径，每个请求 ID 一条。在这种情况下，您需要的是嵌套选择。

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

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

我在这里修改了你的 jsfiddle 。请注意，在这种情况下，您无法以与您不再相同的方式获取线条的颜色，因为该数据在该级别不可用。有几种方法可以克服这个问题，最直接的可能是重新格式化您的数据。d3 数组函数（尤其是d3.nest()functions）在这里应该很有帮助。

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

于 2013-03-09T12:09:31.223 回答