Javascript 根据数据变量的d3网络图的彩色链接

我想根据数据向量中的值（向量的每个元素对应于一个特定的链接）给网络图的不同链接上色。我试过这种形式的东西：

var data = [1,1,1,2];

var link = svg.selectAll(".link")
.data(force.links())
.enter()
.append("line")
.attr("class", "link")
.attr("marker-end", "url(#end)")
.on("mouseover", linkmouseover)
.on("mouseout", linkmouseout);
link.data(force.links()).enter().append(".link")
.style("stroke", function(d,i){
return ( (data[i]==2) ?
         "red" : "black" )
});

然而，这似乎不起作用。如果这很重要，我还有一个svg样式：

 .link {
stroke: #ff0000;
opacity: 0.6;
stroke-width: 1.5px;
}

---

有人知道为什么这样不行吗？我有Plunker版本。

你设置链接的方式看起来很奇怪。尤其是下面这句话似乎毫无意义：

link.data(force.links()).enter().append(".link")

该行前面的语句成功地插入了处理enter选择的链接的行。在可疑行上，您将再次将相同的数据绑定到链接的选择。因为您没有指定任何键函数来访问数据，所以这将基于数据的索引计算联接，因为您以前处理过相同的数据，所以会生成一个空的enter选择。因此，方法设置

style（“stroke”，…）

将永远不会执行回调。此外，对

.append（“.link”）

的调用是错误的，因为

.link

不是可以使用此方法追加的有效SVG元素

您似乎在某种程度上通过复制粘贴操作将这部分代码弄乱了。如果您去掉上面提到的行并删除前面的分号，您的代码将按预期工作：

var link = svg.selectAll(".link")
  .data(force.links())
    .enter()
  .append("line")
  .attr("class", "link")
  .attr("marker-end", "url(#end)")
  .on("mouseover", linkmouseover)
  .on("mouseout", linkmouseout)
  .style("stroke", function(d,i){
    return ( (data[i]==2) ? "red" : "black" );
  });

请查看以获取一个工作示例