web-dev-qa-db-ja.com

d3 v4で固定リンク距離を設定する方法

すべてのAPIの例はまだv3のようです。次のような固定距離のリンクを使用して力グラフを作成する方法を理解しようとしています http://bl.ocks.org/d3noob/5141278

Link_distanceを確認しましたが、どのように適用するかわかりません： https://github.com/d3/d3-force/blob/master/README.md#link_distance

次のようなグラフを作成します。

  let simulation = d3.forceSimulation()
      .force("link", d3.forceLink().id(function(d) { return d.id; }))
      .force("charge", d3.forceManyBody().strength(-150))
      .force("center", d3.forceCenter(width / 2, height / 2));

私は次のようなさまざまなコンボを試しました：

  // .force("link", d3.forceLink().distance(20).strength(1))
  // .force("linkDistance", 20)
  // .force("link", d3.forceLink().id(function(d) { return d.id; }))

運が悪い！

Link_distanceを修正できないようですか？その強さと（距離、それが何であれ）の結果

それでは、d3 v4のリンクにstrengthおよびdistanceをどのように適用しますか？シミュレーションなどに適用されていますか？

javascriptd3.jsgraph
14
dcsan

あなたはv4で距離を変えるのに近づいています！この変更を確認してください...それは私にとってはうまくいきます：

    var simulation = d3.forceSimulation()
    .force("link", d3.forceLink().id(function(d, i) { return i; }).distance(100).strength(1))
    .force("charge", d3.forceManyBody())
    .force("center", d3.forceCenter(width / 2, height / 2));

元のコードはほぼ正しいものでした。ただし、iを関数に追加する必要があり、リンク距離を変更するためにiも返す必要があります。これを反映するために元のコードを編集しました。このリンクを参照してください： 無料コードキャンプへのリンク

24
idotj

あなたはもうすぐそこにいます...これをチェックしてください。このコードは私にとってはうまくいきます。

注：このコードでノードラベルに基づいてリンクの長さを動的に取得していますGetNodeDefaults（d.label）.linkDistanceつまり、100、200、300などにすることができます。

var forceLink = d3
    .forceLink().id(function (d) {
        return d.id;
    })
    .distance(function (d) {
        return GetNodeDefaults(d.label).linkDistance;
    })
    .strength(0.1);

var simulation = d3.forceSimulation()
    .force("link", forceLink)
    .force("charge", d3.forceManyBody().strength(function (d, i) {
        var a = i == 0 ? -2000 : -1000;
        return a;
    }).distanceMin(200).distanceMax(1000))
    .force("center", d3.forceCenter(width / 2, height / 2))
    .force("y", d3.forceY(0.01))
    .force("x", d3.forceX(0.01))
    .on("tick", ticked);
3
Vishweshwaraiah K