Question

我想根据数据向量中的值（其中向量的每个元素对应于特定链接）为网络图的不同链接着色。我尝试了以下形式：

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版本here。

Answer 1

您设置链接的方式看起来很奇怪。特别是以下几行似乎没有任何意义：

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

此行前面的语句成功插入了处理输入选择的链接的行。在可疑线路上，您将再次将相同的数据绑定到链接的选择。因为您没有指定任何用于访问数据的键函数，所以这将根据数据的索引计算连接，因为您之前处理过相同的数据，所以会产生一个空的输入选择。因此，方法设置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" );
  });

查看updated code的工作示例。

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

1 个答案: