改變邊緣顏色與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

回答

相關問題