Question

我使用D3的力布局制作了一个分组气泡图，以便向中间创造力量，如下所示：

  var forceStrength = 0.03;
  var center = { x: widthBubbles / 2, y: heightBubbles / 2 };

  var simulation = d3.forceSimulation()
     .velocityDecay(0.2)
     .force('x', d3.forceX().strength(forceStrength).x(center.x))
     .force('y', d3.forceY().strength(forceStrength).y(center.y))
     .force('charge', d3.forceManyBody().strength(charge))
     .on('tick', ticked);

  function charge(d) {
    return -forceStrength * Math.pow(d.r, 2.0);
  }

  function ticked() {
    bubbles
      .attr('cx', function (d) { return d.x; })
      .attr('cy', function (d) { return d.y; });
  }

我的图表与此类似：Gates Foundation Educational Spending

我希望能够在单击节点时对其施加力，以便单击的节点将移动到另一个区域。在D3的文档中，有一些名为＆＃34;定位力＆＃34;，根据文档，它可用于多个节点：

虽然这些力可用于定位单个节点，但它们主要用于适用于所有（或大多数）节点的全局力。

所以我的问题是，是否有办法将力施加到D3中的单个节点。

Answer 1

我通过创建一个函数解决了这个问题，每次点击气泡时都会调用该函数：

  //Function for moving bubbles when selected
  function moveSelectedBubbles() {
    simulation.force('x', d3.forceX().strength(forceStrength).x(function(d){
      //Check if bubble is selected
      return (selectedCountries.indexOf(d.data.country) >= 0) ? selectedCenter.x : center.x;
    }));

  simulation.alpha(1).restart();

  }

但是，每次选择气泡时，此功能都会设置每个节点的力。也许有一种更有效的方法来处理这个案子。

D3将力添加到单个节点

1 个答案: