D3.jsスタティックフォースレイアウトがパスで動作しませんか？

この例を変更すると、https://bl.ocks.org/mbostock/1667139は行の代わりにパスを使用しますが、動作しません。イムは、このように自分のダニの機能を使用してみてください。D3.jsスタティックフォースレイアウトがパスで動作しませんか？

function tick() { 
      link.attr("d", function(d) { 
      var x1 = d.source.x, 
       y1 = d.source.y, 
       x2 = d.target.x, 
       y2 = d.target.y, 
       dx = x2 - x1, 
       dy = y2 - y1, 
       dr = Math.sqrt(dx * dx + dy * dy), 

       // z uzla do ineho uzla 
       drx = dr, 
       dry = dr, 
       xRotation = 0, 
       largeArc = 0, 
       sweep = 1; 

      //do sameho seba 
      if (x1 === x2 && y1 === y2) { 
       xRotation = -45; 
       largeArc = 1; 
       drx = 30; 
       dry = 30; 
       x2 = x2 + 1; 
       y2 = y2 + 1; 
      } 

      return "M" + x1 + "," + y1 + "A" + drx + "," + dry + " " + xRotation + "," + largeArc + "," + sweep + " " + x2 + "," + y2; 
     });  
}

私はちょうどカント使用パス何かまたは静的な力のレイアウトを欠落している場合は、知りません。パスは、docs（太字鉱山）からnormaly

出典

2017-06-10 Martin

作業と強制レイアウト：

simulation.tick（）

により現在のアルファをインクリメント（alphaTarget - アルファ）×alphaDecay。は登録された各力を呼び出し、新しいアルファを渡します。は、各ノードの速度をvelocity×velocityDecayだけデクリメントします。最後には速度別に各ノードの位置をインクリメントします。

は、この方法では、イベントを送出しません。の作成時に自動的にシミュレーションが開始されるか、またはsimulation.restartが呼び出されると、イベントは内部タイマーによってディスパッチされます。シミュレーションが開始されたダニの自然数（alphaMin）⌈logある/ログ（1 - alphaDecay）⌉。

このメソッドは、simulation.stopと組み合わせて使用して、静的な力のレイアウトを計算することができます。大きなグラフの場合、静的レイアウトは、Webワーカーで計算されたで、ユーザーインターフェイスがフリーズしないようにする必要があります。

イベントをディスパッチしないため、ティック関数は決して呼び出されず、使用されません。代わりに、単にラインを交換し、一度あなたのパスを設定します。コメントへの

<!DOCTYPE html> 
 
<svg width="960" height="500"></svg> 
 
<script src="https://d3js.org/d3.v4.min.js"></script> 
 
<script> 
 
    var svg = d3.select("svg"), 
 
    width = +svg.attr("width"), 
 
    height = +svg.attr("height"), 
 
    g = svg.append("g").attr("transform", "translate(" + width/2 + "," + height/2 + ")"); 
 

 
    var n = 100, 
 
    nodes = d3.range(n).map(function(i) { 
 
     return { 
 
     index: i 
 
     }; 
 
    }), 
 
    links = d3.range(n).map(function(i) { 
 
     return { 
 
     source: i, 
 
     target: (i + 3) % n 
 
     }; 
 
    }); 
 

 
    var simulation = d3.forceSimulation(nodes) 
 
    .force("charge", d3.forceManyBody().strength(-80)) 
 
    .force("link", d3.forceLink(links).distance(20).strength(1).iterations(10)) 
 
    .force("x", d3.forceX()) 
 
    .force("y", d3.forceY()) 
 
    .stop(); 
 

 
    var loading = svg.append("text") 
 
    .attr("dy", "0.35em") 
 
    .attr("text-anchor", "middle") 
 
    .attr("font-family", "sans-serif") 
 
    .attr("font-size", 10) 
 
    .text("Simulating. One moment please…"); 
 

 
    // Use a timeout to allow the rest of the page to load first. 
 
    d3.timeout(function() { 
 
    loading.remove(); 
 

 
    // See https://github.com/d3/d3-force/blob/master/README.md#simulation_tick 
 
    for (var i = 0, n = Math.ceil(Math.log(simulation.alphaMin())/Math.log(1 - simulation.alphaDecay())); i < n; ++i) { 
 
     simulation.tick(); 
 
    } 
 

 
    g.append("g") 
 
     .attr("stroke", "#000") 
 
     .attr("stroke-width", 1.5) 
 
     .selectAll("line") 
 
     .data(links) 
 
     .enter().append("path") 
 
     .attr("d", function(d) { 
 
     var x1 = d.source.x, 
 
      y1 = d.source.y, 
 
      x2 = d.target.x, 
 
      y2 = d.target.y, 
 
      dx = x2 - x1, 
 
      dy = y2 - y1, 
 
      dr = Math.sqrt(dx * dx + dy * dy), 
 

 
      // z uzla do ineho uzla 
 
      drx = dr, 
 
      dry = dr, 
 
      xRotation = 0, 
 
      largeArc = 0, 
 
      sweep = 1; 
 

 
     //do sameho seba 
 
     if (x1 === x2 && y1 === y2) { 
 
      xRotation = -45; 
 
      largeArc = 1; 
 
      drx = 30; 
 
      dry = 30; 
 
      x2 = x2 + 1; 
 
      y2 = y2 + 1; 
 
     } 
 

 
     return "M" + x1 + "," + y1 + "A" + drx + "," + dry + " " + xRotation + "," + largeArc + "," + sweep + " " + x2 + "," + y2; 
 
     }); 
 

 
    g.append("g") 
 
     .attr("stroke", "#fff") 
 
     .attr("stroke-width", 1.5) 
 
     .selectAll("circle") 
 
     .data(nodes) 
 
     .enter().append("circle") 
 
     .attr("cx", function(d) { 
 
     return d.x; 
 
     }) 
 
     .attr("cy", function(d) { 
 
     return d.y; 
 
     }) 
 
     .attr("r", 4.5); 
 

 

 
    }); 
 
</script>

応答：

「ノード」として円とテキストを追加するには、私が希望gを作成し、それを配置して円とテキストを入れます：

var g = node 
    .selectAll(".node") 
    .data(nodes) 
    .enter() 
    .append("g") 
    .attr("transform", function(d){ 
     return "translate(" + d.x + "," + d.y + ")"; 
    }); 

    g.append("circle") 
    .attr("class", "node") 
    .attr("stroke", "#fff") 
    .attr("r", 28); 

    g.append("text") 
    .text("test");

出典

2017-06-10 19:40:57 Mark

Rex thx、can私はもう一つあなたに尋ねますか？どのサークルにテキストを追加するのですか？静的ではない静的なレイアウトは、単にvar circle.append（ "g"）を作成してからappend（ "circle"）を追加してテキストを追加しますが、ここでは機能しません。私の試行はhttps://jsfiddle.net/f7e20crm/です。そのテキストは、円とテキスト要素の場合、g要素の一部ではない別の要素です。 – Martin

@Martin、更新の回答を参照してください。そして更新されたフィドル[ここ]（https://jsfiddle.net/f7e20crm/6/）。 – Mark

D3.jsスタティックフォースレイアウトがパスで動作しませんか？

答えて

関連する問題