javascript - D3 力模拟 - 让节点以相同 Angular 更接近一点

Question

此问题基于Move d3 circles away from center circle - force layout其中，当节点 N1 的大小发生变化并且我在节点上运行模拟时，N1 周围的节点将以相同的 Angular 移开，但我这里的问题是当其大小发生变化时，使节点回到更靠近 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))

提前致谢。

Answer 1

节点不会靠近，因为您的模拟“速度”(称为 alpha 值)已耗尽(衰减)。只需更换即可

simulation.restart();

你不需要的

simulation.alpha(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));

强度决定了碰撞力和钉扎力之间的平衡。强度越大，节点就越积极地尝试占据其初始位置。

也可能需要使用点吸引力而不是 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>