色の力のレイアウトを作るためにD3を使用した

Question

どのように私は色力がD3.v4とキャンバスを使用してレイアウトを指示することができますか？

ノードの色付け方法がわかりません。

参考として、exampleを使用することができます。この関数に色を追加

：

var color = d3.scaleOrdinal(d3.schemeCategory10); 

function drawNode(d) { 
    context.moveTo(d.x + 3, d.y); 
    context.arc(d.x, d.y, 3, 0, 2 * Math.PI); 
    context.fillStyle = function(d) { 
    // d.group is either a 1 or a 2 
    return color(d.group) 
    } 
    context.fill() 
} 

上記のコードはので、私はそれはそれを行うための最善の方法ではないことを考えていますグラフィックは本当にラグます。さらに、上記のコードは、別々のグループに属していても、すべてのノードの色を同じ色にします。

あなたは完全なコードhere

編集見つけることができます：明確にするため、私はパフォーマンス上の理由からキャンバスを使用したいと思います。私はそれをSVGで動作させることに成功しましたが、それはパンとズームを非常に遅くします。

Answer 1

アプリケーション全体を見ずにパフォーマンスを向上させることはできません。しかし、色の問題のために、解決策は次のとおりです。

context.fillStyle = color(d.group) 

Answer 2

ソリューションは、関数にcontext.beginPath()を追加することでした。

function drawNode(d) { 
    context.fillStyle = color(d.group); 
    context.beginPath(); 
    context.moveTo(d.x + 3, d.y); 
    if(d.group == 1){ 
     context.arc(d.x, d.y, 17 * Math.log(1.25 * Math.pow(d.winCount, 0.25)) + 3, 0, 2 * Math.PI); 
    }else{ 
     context.arc(d.x, d.y, 3.75 * Math.log(Math.pow(d.winCount, 0.75)) + 4, 0, 2 * Math.PI); 
    } 
    context.fill(); 
}