2

この質問は、移動 d3 円を中心円から遠ざける -ノード N1 のサイズが変更され、ノードでシミュレーションを実行すると、N1 の周りのノードが同じ角度で移動するレイアウトを強制するに基づいていますが、私がここに持っている質問ノードのサイズが元に戻ったときに、ノードを N1 に近づけることです。どうすればそれを達成できますか？

以下で使用しましたが、ノードが近づいていません

simulation.nodes(nodes);
simulation.restart();
for (var i = 0; i < 300; ++i) simulation.tick();

また、フォース シミュレーションを試してみると、他のノードの位置が完全に変化しています。こちらのビデオをご覧くださいhttp://recordit.co/797i1E8ocT

d3.forceSimulation(nodes)
    .force('x', d3.forceX(plot.x))
    .force('y', d3.forceY(plot.y))

前もって感謝します。

4

1 に答える 1

3

alpha値と呼ばれるシミュレーションの「速度」が使い果たされている (減衰している)ため、ノードが近づきません。交換するだけ

simulation.restart();

必要のないもの

simulation.alpha(1);

ノードは適切に動作します。

ただし、お気づきのように、数回の展開と折りたたみの後、ノードは最初の場所から大幅に移動する可能性があります。この問題はいくつかの方法で解決できます。ある種の決定論的アルゴリズムを使用して、ツリー レイアウトなどのノードの位置を計算できますが、ノードを展開したり折りたたんだりするときにスムーズな遷移を実現するのは難しい場合があります。もう 1 つの方法は、各ノードを最初に計算された位置に引き付ける追加の力を使用して、ノードを初期位置に「固定」することです。

これを実装するには、シミュレーションの初期化と最初の実行後に初期位置を保存できます。

for (let d of data.children) {
  d.initialX = d.x;
  d.initialY = d.y;
}

そして、各ノードを初期位置に引き付ける力で と をx置き換えます。y

simulation
  .force("x", d3.forceX(d => d.initialX).strength(0.2))
  .force("y", d3.forceY(d => d.initialY).strength(0.2));

強度は、衝突力とピンニングのバランスを決定します。強度が大きいほど、ノードはより積極的に初期位置を占有しようとします。

と 1 の合計の代わりにポイント アトラクションを使用することも望ましい場合がxありyます — d3-force-attractパッケージを見てください。

次のスニペットは、説明されているアプローチを示しています。

var w = 650,
  h = 650;
var svg = d3.select("body")
  .append("svg")
  .attr("width", w)
  .attr("height", h);

var color = d3.scaleOrdinal(d3.schemeCategory10)

var data = {
  name: "root",
  children: [{
    label: 'RED1',
    size: 20,
    color: 'red'
  }, {
    label: 'RAD2',
    size: 20,
    color: '#c99700'
  }, {
    label: 'BIL3',
    size: 20,
    color: 'blue'
  }, {
    label: 'EEN4',
    size: 10,
    color: '#007377'
  }, {
    label: 'INO5',
    size: 40,
    color: '#b4975a'
  }, {
    label: 'RAD6',
    size: 40,
    color: '#c99700'
  }, {
    label: 'BIL7',
    size: 30,
    color: '#008ce6'
  }, {
    label: 'INO8',
    size: 30,
    color: '#b4975a'
  }, {
    label: 'INO9',
    size: 40,
    color: '#b4975a'
  }, {
    label: 'RAD10',
    size: 40,
    color: '#c99700'
  }, {
    label: 'BIL11',
    size: 30,
    color: '#008ce6'
  }, {
    label: 'INO12',
    size: 30,
    color: '#b4975a'
  }]
};

var render = function() {

  var simulation = d3.forceSimulation(data.children)
    .force("x", d3.forceX(w / 2))
    .force("y", d3.forceY(h / 2))
    .force("collide", d3.forceCollide(function(d) {
      return d.size + 20
    }))
    .stop();

  for (var i = 0; i < 100; ++i) simulation.tick();

  for (let d of data.children) {
    d.initialX = d.x;
    d.initialY = d.y;
  }

  simulation
    .force("x", d3.forceX(d => d.initialX).strength(0.2))
    .force("y", d3.forceY(d => d.initialY).strength(0.2));

  let nodeLevel1 = svg.selectAll('circle')
    .data(data.children, (d) => {
      // Attaching key for uniqueness
      return d.label;
    });

  nodeLevel1.exit().remove();
  let nodeLevel1Enter = nodeLevel1
    .enter()
    .append("circle")
    .attr("cx", function(d) {
      return d.x
    })
    .attr("cy", function(d) {
      return d.y
    })
    .attr("r", function(d) {
      return d.size
    })
    .style("fill", function(d) {
      return d.color;
    })

  nodeLevel1Enter = nodeLevel1Enter
    .merge(nodeLevel1)

  nodeLevel1Enter
    .transition()
    .duration(1600)
    .attr("cx", function(d) {
      return d.x
    })
    .attr("cy", function(d) {
      return d.y
    })
    .attr("r", function(d) {
      return d.size
    })
    .style("fill", function(d) {
      return d.color;
    })

  d3.select('#updatesize').on('click', function() {
    add();
  })
  d3.select('#updatebluesize').on('click', function() {
    addblue();
  })
  d3.select('#resetsize').on('click', function() {
    reset();
  })
  d3.select('#resetall').on('click', function() {
    resetall();
  })

  var add = function() {
    data.children[0].size = 140;
    move();
  }
  var addblue = function() {
    data.children[2].size = 100;
    move();
  }
  var reset = function() {
    data.children[0].size = 20;
    move();
  }
  var resetall = function() {
    data.children[0].size = 20;
    data.children[2].size = 20;
    move();
  }

  function move() {
    simulation.nodes(data.children);
    simulation.alpha(1);
    for (var i = 0; i < 300; ++i) simulation.tick();
    nodeLevel1Enter
      .transition()
      .duration(1600)
      .attr("cx", function(d) {
        return d.x
      })
      .attr("cy", function(d) {
        return d.y
      })
      .attr("r", function(d) {
        return d.size
      });
  }
}

render();
<script src="https://d3js.org/d3.v4.min.js"></script>

<a href='javascript:;' id='updatesize'>Update red resource size</a> |
<a href='javascript:;' id='updatebluesize'>Update blue resource size</a> |
<a href='javascript:;' id='resetsize'>Reset red resource size</a> |
<a href='javascript:;' id='resetall'>Reset all</a>

于 2018-08-23T23:06:35.353 に答える