如何在 d3.js v5 中实现点的防碰撞？答案

【问题标题】：How to implement collision avoidance of points in d3.js v5?如何在 d3.js v5 中实现点的防碰撞？
【发布时间】：2019-04-16 22:15:38
【问题描述】：

我正在尝试绘制一个散点图，而这些点之间没有任何碰撞。每个点代表一个政治家，两点之间的距离代表他们在投票中的合作；因此，距离不必精确。

我设法创建了散点图，但遇到了碰撞问题。我尝试了很多教程和实现，但点要么根本不动，要么在碰撞时消失。

我尝试的所有实现都使用了带有碰撞力的函数 forceSimulation。

这是我当前的版本，其中 forceSimulation 对生成的画布没有影响。它看起来就像被注释掉一样。

初始化数据： data = [{x:num, y:num, radius:num, xstart:num, ystart:num}, ...]

   var data = [];
   for (var x =0; x < positions.length; x++) {
       data.push({
           "xstart": positions[x][0],
           "ystart": positions[x][1],

       });
    }
  data.forEach(function(d) {
    d.x = xscale(d.xstart);
    d.y = yscale(d.ystart);
    d.radius = radius;
  });

创建点：

var dots = g.selectAll("scatter-dots");

dots
    .data(data)
    .enter().append("circle")
        .attr("cx", function (d) { return d.x; } )
        .attr("cy", function (d) { return d.y; } )
        .attr("r", radius)
        // additional attributes
        .each(function (d, i) {
            d3.select(this)
                .attr("id", "poslanec_"+i)
                .attr("class", "poslanec")
                .append("title")
                    .text(osoby[keys[o][i]]["cele_jmeno"]);
        });

有问题的部分：避免碰撞

var simulation = d3.forceSimulation(data)
        .force("collision", d3.forceCollide(radius))
        .on("tick", update);

function update () {
    dots
        .attr("cx", function(d) {return d.x;})
        .attr("cy", function(d) {return d.y;});

// this log prints an unchanged array
   console.log(this.nodes());
}

我预计每个碰撞点都会稍微移到一边（根据其radius），因此没有点会重叠并且只会接触到它们的邻居。

提前感谢您的任何见解！

【问题讨论】：

标签： javascript d3.js collision-detection scatter-plot

【解决方案1】：

我发现从某个版本的某个点的轴不会自动更新，而是存储在 vx/vy 中，即速度；因此，解决方案是从轴中减去速度。

我的解决方案，尽管它并不漂亮：

function update () {
    var nodes = this.nodes();
    nodes.forEach(function (d, i) {
        //selecting by an id of a point
        d3.select('#poslanec_'+nodes[i].id)
            .attr("cx", (nodes[i]["x"] - nodes[i]["vx"]))
            .attr("cy", (nodes[i]["y"] - nodes[i]["vy"]));
    });     
}

【讨论】：