Collision Detection Lost After Toggle (d3v4)

Question

I have a bubble graph in which the bubbles split apart and go back together when a button is pressed.

In my case, the raw data I feed into the bubble graph has 3 columns: Character, Total_Words, and Sex. The way the bubble graph works is each Character is represented by its own bubble. The area of each bubble is scaled based on the Total_Words for each character. The bubbles are colored (and dynamically split) according to Sex.

I've been able to get this working beautifully. The bubbles all form into a circle and separate on the button click, then come back together on the 2nd button click. The problem I have is that when the bubbles first come onto the screen, collision detection works beautifully (evenly spaced bubbles everywhere). But after I separate out the bubbles into two groups (via a second simulation), the collision detection no longer functions (even when explicitly called). In the above picture: Left: collision detection working, all bubbles spaced correctly. Right: Toggle switch "on", bubbles split, but collision detection not working. Bubbles overlap and never stop jittering.

Here is a bl.ocks demo of what I'm working with. https://bl.ocks.org/ProQuestionAsker/79d0228ae7161e349770e7d553cf4c94

This is the entire .js script that I am currently using. I think the issue may lie in the "Adding Toggle Switches" area, where I call simulations, but I can't seem to adjust anything there to make this work.

(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
            })
    }   
}       
})();

I've tried using simulation.restart() with no luck. I've tried using forceCollide.initialize(simulation.nodes()); as suggested from this question here but the bubbles still overlap one another.

I'm new to d3.js and it's very possible that I'm missing something obvious, but I can't seem to get this to work.

Any insight would be very much appreciated. Thanks in advance!

Having a demo to fiddle around with would be really helpful. Could you provide a runnable version of this? — altocumulus, Jan 05 '17 at 10:00
@altocumulus, thanks for the quick response! I just edited the description to add a [link](https://bl.ocks.org/ProQuestionAsker/79d0228ae7161e349770e7d553cf4c94). — Amber Thomas, Jan 05 '17 at 11:38

score 3 · Accepted Answer · answered Jan 05 '17 at 12:04

There are several sections in your code which can be optimized and/or simplified. Doing so helps to clear things up. The click handler for your button can be written as:

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

This will

set the x-force to the appropriate function,
re-heat the simulation and
restart the calculations.

Because the collision detection has already been set, there is no need to re-set this force or to do any initializations on it.

Have a look at the updated Block for a working example. Please note, that I have also modified the code at some other places to make it more readable and to improve the layout of the bubbles. You may need to further tweak some parameters to make the layout fit your needs.

You might just be my favorite person! Thank you so very much! I'm going to spend some time looking through your corrections to figure out how it all works, but switching out the click handler alone fixes the collision detection issue. The fix turned out to be so simple and elegant. — Amber Thomas, Jan 05 '17 at 17:09
It's also good to point out that you can _remove_ a force in a similar fashion with `simulation.force("x", null)`, then reheating, restarting, etc. Thanks for both the question and the answer! — , Apr 04 '17 at 16:24

Collision Detection Lost After Toggle (d3v4)

1 Answers1