改变边缘颜色与D3

我正在读D3教程和我按照这个链接的代码：改变边缘颜色与D3

http://www.d3noob.org/2013/03/d3js-force-directed-graph-example-basic.html

我了解的内容，到目前为止，但我试图通过改变不同的颜色，以了解更多造型。我正在尝试更改节点之间的边缘颜色，但这不起作用。我知道我需要做

path.style("stroke", red)

例如。但是这会改变每个边缘颜色的预期。

但是，我想根据链接数组中的值更改边的颜色。所以，如果links.value是< 1我想要绿色其他我想要一个橙色链接。我有点卡住我知道我需要使用

.style("stroke", function(d) {if d.value < 1 {return 'green'} else {return 'orange'} });

我只是想不通的地方把这个示例代码。我只是想通过一些基本的D3来学习。谢谢！

来源

2016-09-28 Mr.Roboto

您可以设置风格的“输入”选择73边缘：

var path = svg.append("svg:g") 
    .selectAll("path") 
    .data(force.links()) 
    .enter() 
    .append("svg:path") 
    .attr("class", function(d) { return "link " + d.type; }) 
    .attr("class", "link") 
    .style("stroke", function(d){ 
     if(d.value < 1) {return 'green'} else {return 'orange'} 
    }) 
    .attr("marker-end", "url(#end)");

这里是plunker：https://plnkr.co/edit/tOBZdHXVrvcAmh9aHlsl?p=preview

来源

2016-09-29 02:21:41

你应该能够增加您链的方法来结束：

// add the links and the arrows 
var path = svg.append("svg:g").selectAll("path") 
    .data(force.links()) 
    .enter().append("svg:path") 
    .attr("class", "link") 
    .attr("marker-end", "url(#end)");

这约行的代码示例

来源

2016-09-28 19:38:58

改变边缘颜色与D3

回答

相关问题