Javascript 强制碰撞标签，但不强制碰撞d3中的标签点

我正在使用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)
    });

---

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

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

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

下面是一个如何使用它的示例：

  // 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);

在

“勾选”

侦听器中，如果希望

此

成为DOM元素，请不要使用箭头函数。将其更改为常规函数。