Javascript d3 voronoi弧映射-控制.arcs的属性

我使用的是voronoi圆弧贴图示例 我可以成功地可视化我的进出口贸易数据集

但是，我无法更改在特定位置生成的各个路径的属性。 我使用.airport弧来创建这些路径，我希望每个线条的“笔划宽度”或“颜色”可变。 我尝试了几种选择，例如：

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); });

这似乎会以相同的数量更改所有笔划宽度，而在给定位置生成的所有链接的颜色都不同（但位置之间不同）。

---

关于如何更改各个路径的属性有什么建议吗？

代码中有两个错误：

您没有选择要查找的元素。选择class

.airport arcs

将返回包含所有路径的组。要单独操作路径，需要如下选择：

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

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); });

您访问了错误的属性

.count

不是绑定到路径的数据的直接属性，而是机场对象的直接属性

d.source.count是您要查找的

更正后的代码如下所示：

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

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); });

---

您的代码中有两个错误：

您没有选择要查找的元素。选择class

.airport arcs

将返回包含所有路径的组。要单独操作路径，需要如下选择：

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

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); });

您访问了错误的属性

.count

不是绑定到路径的数据的直接属性，而是机场对象的直接属性

d.source.count是您要查找的

更正后的代码如下所示：

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

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); });

---

嗨，谢谢你的建议，是的，我忘了提到我是d3和JS的新手。我在上面的示例文件中尝试了您的建议，但它产生了与我之前相同的结果。只改变了“每个组的颜色”，但没有改变个人路径……@Patrizio，也许吧，我不明白<代码>计数是每个机场的值。因此，

color（d.source.count）

将始终为从任何给定机场开始的所有航班返回相同的颜色。听起来您使用了错误的标准来确定颜色。count是每个目的地每个机场的值。具有不同目的地的同一机场可能具有不同的计数值。因此，我希望基于[count]我可以为不同的路径拥有不同的属性。我不同意：检查

airports.filter（）

函数。它将

count

设置为所有入境或所有出境航班的数量，以较大者为准，仅包括

count>0

的机场。示例的最后一个语句为我的假设提供了另一个提示，即将机场圆的半径设置为

计数的平方根。只有当
count
是每个机场的航班数时，这才有意义。你完全正确。我错过了机场的那一行。filter（）。我在看flights.csv，上面有每种干燥剂的计数。我将尝试在脚本中保留这些信息，然后我想我可以获得我想要的行为。谢谢，谢谢你的建议，是的，我忘了提到我是d3和JS的新手。我在上面的示例文件中尝试了您的建议，但它产生了与我之前相同的结果。只改变了“每个组的颜色”，但没有改变个人路径……@Patrizio，也许吧，我不明白<代码>计数

是每个机场的值。因此，

color（d.source.count）

将始终为从任何给定机场开始的所有航班返回相同的颜色。听起来您使用了错误的标准来确定颜色。count是每个目的地每个机场的值。具有不同目的地的同一机场可能具有不同的计数值。因此，我希望基于[count]我可以为不同的路径拥有不同的属性。我不同意：检查

airports.filter（）

函数。它将

count

设置为所有入境或所有出境航班的数量，以较大者为准，仅包括

count>0

的机场。示例的最后一个语句为我的假设提供了另一个提示，即将机场圆的半径设置为

计数的平方根。只有当
count
是每个机场的航班数时，这才有意义。你完全正确。我错过了机场的那一行。filter（）。我在看flights.csv，上面有每种干燥剂的计数。我将尝试在脚本中保留这些信息，然后我想我可以获得我想要的行为。谢谢