異なる形状を追加する

Question

形状として2種類の形状のノードをノードとして作成しようとしています：rectとcircle、形状情報はd.shapeです。そこにいくつかのスレッドがありますが、解決策は私にはあまり明確ではありません。

私は動作しないmerge方法、使用する最初の試み：このjsbinにおいて、var circlesANDrects = circles.merge(rects)の両方を示していないのに対し、var circlesANDrects = rectsは矩形を示し、var circlesANDrects = circlesが円を示しています。

誰でもこれを解決する方法を知っていますか？

そうでなければ、私はアイデアソリューションは、形状情報に基づいて一つのブロックとappend異なる形状を使用することだと思う：

var circlesANDrects = svg.append("g").selectAll("rect circle") 
.data(force.nodes()) 
.enter() 
<!-- a function that appends different shapes according to shape information --> 

がappendに例/条件を追加する方法を誰もが知っていますか？

Answer 1

appendの引数として関数を渡すことができます。 APIによると：

指定された型が文字列であれば、そうでない場合は、タイプがあることも、選択した各要素[...]の最後の子としてこのタイプ（タグ名）の新しい要素を追加選択した各要素に対して評価された機能

問題は、関数を使用している場合、あなたは、単にこのように、「円」または「RECT」を返すことができない、次のとおりです。

.append(function(d){ 
    if(d.shape == "rect"){ 
     return "rect"; 
    } else { 
     return "circle"; 
    } 
});//this don't work... 

は代わりに、あなたが持っていますDOM要素を返すには、次のようにします：

それは少し複雑、容易に解決策（ただし、正確にあなたが尋ね以下ではない）であるとして

.append(function(d){ 
    if(d.shape == "rect"){ 
     return document.createElementNS("http://www.w3.org/2000/svg", "rect"); 
    } else { 
     return document.createElementNS("http://www.w3.org/2000/svg", "circle"); 
    } 
});//this works... 

は単にここsymbolを使用している：ここでは

var circlesOrRects = svg.append("g").selectAll(".foo") 
    .data(force.nodes()) 
    .enter() 
    .append("path") 
    .attr("d", d3.svg.symbol() 
    .type(function(d) { return d.shape == "rect" ? "circle" : "square"; })) 
    .call(force.drag); 

はあなたのビンです：https://jsbin.com/povuwulipu/1/edit

Answer 2

だから、力のレイアウトのダニ法を理解することによって。 tickメソッドは、それぞれの更新時に強制コールバックです。 したがって、あなたのケースでは、rectとcircleの両方を別々に更新する必要があります。なぜなら、円と矩形を作成して2つの変数に格納したからです。

はあなたのコードの作業バージョンはここにある：https://jsbin.com/disayafube/1/edit?html,output