d3.js - 切换后丢失碰撞检测(d3v4)

我有一个气泡图，其中的气泡会分开，并在按下按钮时一起返回。

就我而言，我输入到气泡图中的原始数据有3列:字符，总字词和性别。气泡图的工作方式是每个角色都用自己的气泡表示。每个气泡的面积根据每个字符的Total_Words缩放。气泡根据性别着色(并动态拆分)。

我已经能够使它工作得很好。气泡全部形成一个圆圈，并在单击按钮时分开，然后在第二次单击按钮时重新回到一起。我的问题是，当气泡首次出现在屏幕上时，碰撞检测的效果很好(到处都是均匀分布的气泡)。但是，在我将气泡分为两组(通过第二次模拟)之后，碰撞检测不再起作用(即使被显式调用)。
在上图中:左:碰撞检测有效，所有气泡均正确间隔。右:拨动开关“打开”，气泡破裂，但碰撞检测不起作用。气泡重叠，永不停止抖动。

这是我正在使用的bl.ocks演示。 https://bl.ocks.org/ProQuestionAsker/79d0228ae7161e349770e7d553cf4c94

这是我当前正在使用的整个.js脚本。我认为问题可能出在“添加拨动开关”区域，在这里我称之为模拟，但是我似乎无法对此进行任何调整以使其正常工作。

(function() {
    var width = 400,
    height = 300;

    var svg = d3.select("#chart")
        .append("svg")
        .attr("height", height)
        .attr("width", width)
        .append("g")
        .attr("transform", "translate(0,0)")

    var radiusScale = d3.scaleSqrt().domain([1, 3114]).range([1, 50])

    var forceXSplit = d3.forceX(function(d){
        if(d.Sex === "male") {
            return (width * .30)
        } else {
            return (width * .70)
        }
        }).strength(0.15)

    var forceXCombine = d3.forceX((width)/2).strength(0.1)

    var forceCollide = d3.forceCollide(function(d){
         return radiusScale(d.Total_Words) + 1
         })

    var simulation = d3.forceSimulation()
        .force("x", forceXCombine)
        .force("y", d3.forceY(height / 2).strength(0.09))
        .force("collide", forceCollide)

    var tooltip = d3.select("body")
        .append("div")
        .style("position", "absolute")
        .style("z-index", "20")
        .style("visibility", "hidden")
        .style("color", "white")
        .style("padding", "8px")
        .style("background-color", "rgba(0, 0, 0, 0.75)")
        .style("border-radius", "6px")
        .style("font", "12px sans-serif")
        .text("");

// Importing data file

d3.queue()
    .defer(d3.csv, "data.csv")
    .await(ready)

function ready (error, datapoints) {

    var circles = svg.selectAll(".Character")
        .data(datapoints)
        .enter().append("circle")
        .attr("class", "Character")
        .attr("r", function(d){
            return radiusScale(d.Total_Words)
        })
        .style("fill", function(d) {
            var returnColor;
                if (d.Sex === "male") { returnColor = "#355C7D";
                } else if (d.Sex === "female") {returnColor = "#F67280";}
                return returnColor;
            })
        .on("mouseover", function(d) {
            tooltip.html(d.Character + "<br><br> Words Spoken: " + d.Total_Words);
            tooltip.style("visibility", "visible");
            })
        .on("mousemove", function() {
            return tooltip.style("top", (d3.event.pageY-10)+"px").style("left", (d3.event.pageX+10)+"px");
            })
        .on("mouseout", function(){return tooltip.style("visibility", "hidden");});

// Adding Toggle Switches

    var atRight = true

    var rect = svg.append("rect")
        .attr("x", 10)
        .attr("y", 10)
        .attr("rx", 22)
        .attr("ry", 22)
        .style("fill", "lightgray")
        .attr("width", 64)
        .attr("height", 40);

    var circle = svg.append("circle")
        .attr("cx", 30)
        .attr("cy", 30)
        .attr("r", 16)
        .style("fill", "white")
        .on("click", function(){
            if(atRight === true){
            simulation
                .force("x", forceXSplit)
                .alphaTarget(0.2)
                .force("collide", forceCollide)
            setAtRight(!atRight)
            } else {
            simulation
                .restart()
                .force("x", forceXCombine)
                .alphaTarget(0.2)
            forceCollide.initialize(simulation.nodes());
            setAtRight(!atRight)
            }
        });

    var setAtRight = function(newValue) {
        atRight = newValue;
        circle.transition().duration(250)
            .attr("cx", (atRight? (30) : (54)))
            .style("fill", "white");
        rect.transition().duration(250)
            .style("fill", atRight? "lightgray" : "#F67280");
    };


    var res = {
        'getValue': function() { return atRight; },
        'setValue': setAtRight,
        'remove': function() { circle.remove(); }
    };


    simulation.nodes(datapoints)
        .on('tick', ticked)


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

我已经尝试过使用simulation.restart()了，但是没有运气。我已经尝试过根据这个问题here的建议使用forceCollide.initialize(simulation.nodes());，但是气泡仍然彼此重叠。

我是d3.js的新手，很可能我遗漏了一些明显的东西，但似乎无法使它正常工作。

任何见解将不胜感激。提前致谢!

最佳答案

您的代码中有几个部分可以优化和/或简化。这样做有助于清除问题。您按钮的点击处理程序可以写成:

.on("click", function(){
  simulation
    .force("x", atRight ? forceXSplit : forceXCombine)  // 1. Set the force
    .alpha(1)                                           // 2. Reheat
    .restart();                                         // 3. Restart
   setAtRight(!atRight);
});

这将

将x力设置为适当的函数

重新加热模拟和

重新开始计算。

因为已经设置了碰撞检测，所以无需重新设置此力或对其进行任何初始化。

看一下更新后的Block的工作示例。请注意，我还在其他地方修改了代码，以使其更具可读性并改善气泡的布局。您可能需要进一步调整一些参数，以使布局适合您的需求。