Question

我正在阅读D3教程并遵循此链接中的代码：

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

我了解到目前为止的内容，但我试图通过改变不同的颜色来学习更多样式。我试图改变节点之间的边缘颜色，但这不起作用。我知道我需要做

path.style("stroke", red)

例如

。但是这会按预期改变每种边缘颜色。

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

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

我无法弄清楚将其放在示例代码中的位置。我只想尝试从一些基本的D3中学习。谢谢！

Answer 1

您可以在＆＃34;中输入＆＃34;选择边缘：

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

Answer 2

您应该能够将您的方法链添加到以下结尾：

// 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)");

它是示例代码的第73行

用D3改变边缘颜色

2 个答案: