在d3中强制碰撞标签而不是它们的点

Question

我正在使用d3制作一个线图，它必须支持多达100个点，使其非常拥挤。问题是一些标签重叠。

我尝试的方法包括绘制所有点，然后单独绘制所有标签并在标签上运行力碰撞以阻止它们重叠，然后在力碰撞后绘制每个标签之间的线及其相关点

我无法使部队发挥作用，更不用说在之后绘制线条了。

任何有关更好方法的建议都会受到欢迎。

这是我的代码：

$.each(data.responseJSON.responsedata, function(k, v) {
    var thispoint = svg.append("g").attr("transform", "translate("+pointx+","+pointy+")");
    thispoint.append("circle").attr("r", 10).style("fill","darkBlue").style("stroke","black");
    var label = svg.append("text").text(v.conceptName).style("text-anchor", "end").attr("font-family", "Calibri");
    label.attr("transform", "translate("+(pointx)+","+(pointy-12)+") rotate(90)")
    });
nodes = d3.selectAll("text")

simulation = d3.forceSimulation(nodes)
        .force("x", d3.forceX().strength(10))
        .force("y", d3.forceY().strength(10))
        .force("collide",d3.forceCollide(20).strength(5))
        .velocityDecay(0.15);

ticks = 0;

simulation.nodes(data)
    .on("tick", d => {
        ticks = ticks + 1;
        d3.select(this).attr("x", function(d) { return d.x }).attr("y", function(d) { return d.x });
        console.log("updated" + this)
    });

Answer 1

强制布局是移动标签以避免碰撞的相对昂贵的方式。它是迭代和计算密集的。

更高效的算法一次添加一个标签，确定每个标签的最佳位置。例如，“贪婪”策略按顺序添加每个标签，选择标签与已添加标签重叠程度最低的位置。

我创建了一个D3组件，d3fc-label-layout，它实现了许多标签布局策略：

https://github.com/d3fc/d3fc-label-layout

以下是如何使用它的示例：

  // Use the text label component for each datapoint. This component renders both
  // a text label and a circle at the data-point origin. For this reason, we don't
  // need to use a scatter / point series.
  const labelPadding = 2;
  const textLabel = fc.layoutTextLabel()
    .padding(2)
    .value(d => d.language);

  // a strategy that combines simulated annealing with removal
  // of overlapping labels
  const strategy = fc.layoutRemoveOverlaps(fc.layoutGreedy());

  // create the layout that positions the labels
  const labels = fc.layoutLabel(strategy)
    .size((d, i, g) => {
      // measure the label and add the required padding
      const textSize = g[i].getElementsByTagName('text')[0].getBBox();
      return [
        textSize.width,
        textSize.height
      ];
    })
    .position((d) => {
      return [
        d.users,
                d.orgs
      ]
    })
    .component(textLabel);

https://bl.ocks.org/ColinEberhardt/27508a7c0832d6e8132a9d1d8aaf231c