D3

Question

私はD3のチュートリアルを読んでいますと、このリンクのコード次のです

でエッジの色を変更する：http://www.d3noob.org/2013/03/d3js-force-directed-graph-example-basic.html

は、私は、これまでの内容を理解するが、異なる色を変更することで、より多くのスタイリングを学ぶしようとしています。私はノード間のエッジの色を変更しようとしていますが、これは機能しません。私がする必要があることを知っている

path.style("stroke", red) 

たとえば、しかし、これは期待どおりにすべてのエッジの色を変更します。

ただし、リンク配列の値に基づいてエッジの色を変更したいとします。ですから、links.valueが<であれば、私は緑色になりたい、そうでなければオレンジ色のリンクが必要です。 私はサンプルコードでこれをどこに置くか、私はちょうど把握することはできません

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

を使用する必要が知っている、やや立ち往生しています。私はちょうどいくつかの基本的なD3の例で学びたいと思っています。ありがとう！

Answer 1

の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

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

それはあなたがの「入力」を選択してスタイルを設定し、約ラインのサンプルコード