javascript - d3 voronoi arc Map - 控制.arcs的属性

Question

我正在使用 voronoi 弧线图示例 http://bl.ocks.org/mbostock/7608400我可以成功地可视化我的 import/export 贸易数据集。

但是，我无法更改在特定位置生成的各个路径的属性。我使用 .airport-arcs 来制作这些路径，并且我希望各个线条具有可变的“笔画宽度”或“颜色”。我尝试了几种选择，例如:

var color = d3.scale.category20();
...       
var td = svg.selectAll(".airport-arcs")
td.style("stroke", function(d) { return color(d.count); });
td.attr("stroke-width", function(d) { return Math.log(d.count); });

这似乎将所有笔划宽度更改相同的数量，而在给定位置生成的所有链接的颜色都不同(但位置之间不同)。关于如何更改各个路径的属性有什么建议吗？

Answer 1

您的代码中有两个错误:

1. 您没有选择您要查找的元素。选择类 .airport-arcs 将返回包含所有路径的组。要单独操作路径，您需要像这样选择:

   var td = svg.selectAll(".airport-arcs path")
   

2. 您正在访问错误的属性。 .count 不是绑定(bind)到路径的数据的直接属性，而是机场对象的直接属性。 d.source.count 就是您要查找的内容。

您更正后的代码将如下所示:

var color = d3.scale.category20();

var td = svg.selectAll(".airport-arcs path")
td.style("stroke", function(d) { return color(d.source.count); });
td.attr("stroke-width", function(d) { return Math.log(d.source.count); });