修复d3包布局中一个气泡的位置

Question

bounty到期在6天内。该问题的答案有资格获得+ 150声望赏金。Victor想要引起更多关注对此问题。

我正在使用D3 js（v5）构建气泡图，以显示一些研究结果。基本上，我有一个JSON，其中以total为根，每个结果为子级。

其中一个结果必须突出显示，并位于圆的顶部中心。我设法在此处显示此结果，但其他气泡重叠（可能是因为我更改了D3层次结构算法提供的位置）。

是否可以以编程方式固定一个气泡（在我的示例中为蓝色气泡）的位置并重新定位其他气泡，以免它们彼此重叠？

JFiddle

const data = {
  name: 'Total',
  size: 1999999,
  children: [{
      name: 'Result A',
      size: 69936,
    },
    {
      name: 'Result b',
      size: 45000,
    },
    {
      name: 'Result C',
      size: 250000,
    },
    {
      name: 'Result D',
      size: 426791,
    },
    {
      name: 'Result E',
      size: 56000,
    },
    {
      name: 'Result F',
      size: 61050,
    },
    {
      name: 'Result G',
      size: 30000,
    },
  ],
};

// Fix this bubble at the top
const FIXED_BUBBLE_NAME = 'Result b';

const GREEN = '#90E0C2';
const BLUE = '#73A1FC';

const GRAPH_DIMENSIONS = {
  WIDTH: 234,
  HEIGHT: 234,
  PADDING: 10,
};

const buildDataTree = () => {
  const packLayout = d3
    .pack()
    .size([
      GRAPH_DIMENSIONS.WIDTH,
      GRAPH_DIMENSIONS.HEIGHT,
    ])
    .padding(GRAPH_DIMENSIONS.PADDING);

  const rootNode = d3
    .hierarchy(data)
    .sum((d) => d.size)
    .sort((a, b) => {
      return b.value - a.value;
    })

  return packLayout(rootNode);
};

const getSvgRoot = () => {
  return d3
    .select('#graph-container')
    .append('svg')
    .attr('id', 'graph-container-svg')
    .attr('width', GRAPH_DIMENSIONS.WIDTH + GRAPH_DIMENSIONS.PADDING)
    .attr('height', GRAPH_DIMENSIONS.HEIGHT + GRAPH_DIMENSIONS.PADDING)
    .style('overflow', 'visible');
};


const rootNodeDataTree = buildDataTree();

const svgRoot = getSvgRoot();

const node = svgRoot
  .selectAll('g')
  .data(
    d3
    .nest()
    .key((d) => d.id)
    .entries(rootNodeDataTree.descendants()),
  )
  .join('g')
  .selectAll('g')
  .data(d => d.values)
  .join('g');

node
  .append('circle')
  .attr('r', (d) => d.r)
  .attr('cx', (d) => {
    // if it is the selected bubble it must be at the center
    if (d.data.name === FIXED_BUBBLE_NAME) {
      return GRAPH_DIMENSIONS.WIDTH / 2 + d.r / 2;
    }
    return d.x + GRAPH_DIMENSIONS.PADDING;
  })
  .attr('cy', (d) => {
    // if it is the selected bubble it must be at the center
    if (d.data.name === FIXED_BUBBLE_NAME) {
      return d.r + GRAPH_DIMENSIONS.PADDING * 2;
    }
    return d.y + GRAPH_DIMENSIONS.PADDING;
  })
  .attr('cursor', 'pointer')
  .attr('stroke', (d) => (d.children ? GREEN : ''))
  .attr('stroke-width', (d) => (d.children ? 2 : 0))
  .attr('fill-opacity', (d) => (d.children ? 0.24 : 1))
  .attr('fill', (d) => {
    if (d.data.name === FIXED_BUBBLE_NAME) {
      return BLUE;
    } else {
      return GREEN;
    }
  })

<script src="https://d3js.org/d3.v5.min.js"></script>
<div id="graph-container">

</div>

Answer 1

这里是我的建议的小提琴：https://jsfiddle.net/Lhk4stcm/

力模拟代码为：

const simulation = d3
  .forceSimulation(allNodes.filter( (d) => d.depth !== 0))
  .force("collide",d3.forceCollide(d => { return d.r;}))
  .force("charge", d3.forceManyBody().strength(00))
  .force("center", d3.forceCenter(GRAPH_DIMENSIONS.WIDTH/2, GRAPH_DIMENSIONS.HEIGHT/2 - 10))
  .force("bound", (alpha) => {
    for (let i = 0; i < allNodes.length; ++i) {
      n = allNodes[i];
      n.x = pythag(n.r, n.y, n.x);
      n.y = pythag(n.r, n.x, n.y);
    }
  })
  .stop();

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

注意，我们正在传递一种称为bound的自定义力，这一步应注意将节点保留在父圆内。

解决了重叠问题，您将不得不根据需要稍微使用一些力量。

根据文档，作用力是一种修改节点位置的功能，您可以使用多个作用力，因此，希望通过稍微作用这些作用力可以解决您的问题。

我希望它会有所帮助。