如何处理d3中的Beeswarm情节中的碰撞？

Question

I've been playing around with this example here for a little while. What I'm trying to do is highlight a single node/circle in the plot (by making it larger with a border; later I want to add text or a letter inside it too).

Currently, I've made the circle for Bhutan larger in the plot like the following:

.attr("r", 
    function(d){return ( d.countryName === "Bhutan" ? r + 4 : r);})
.attr("stroke", function(d){if (d.countryName==="Bhutan"){return "black"}})

However, it overlaps with the other circles. What would be the best approach to avoid these collisions/overlaps? Thanks in advance.

Link to Plunkr - https://plnkr.co/edit/rG6X07Kzkg9LeVVuL0PH?p=preview

---

I tried the following to add a letter inside the bhutan circle

    //find bhutan circle and add a "B" to it
    countriesCircles
    .data(data)
  .enter().append("text")
  .filter(function(d) { return d.countryName === "Bhutan"; })
    .text("B");

Updated Plunkr - https://plnkr.co/edit/Bza5AMxqUr2HW9CYdpC6?p=preview

Answer 1

This is a slightly different problem than in this question here: How to change the size of dots in beeswarm plots in D3.js

You have a few options that I can think of:

• Set the forceCollide to be your largest possible radius * 1.33 , eg (r + 4) * 1.33 . This will prevent overlapping, but spread things out a lot and doesn't look that great.
• Add the radius property to each entry in your array and make the collide work based off that, which will look a bit better but not perform as awesomely for large sets.

Here's an example of how to do that:

...
d3.csv("co2bee.csv", function(d) {
    if (d.countryName === "Bhutan") {
      d.r = r + 4;
    } else {
      d.r = r;
    }
    return d;
}, function(error, data) {
    if (error) throw error;
    var dataSet = data;
...
var simulation = d3.forceSimulation(dataSet)
  ...
  .force("collide", d3.forceCollide(function(d) { return d.r * 1.33; }))
  ...

countriesCircles.enter()
    .append("circle")
    .attr("class", "countries")
    .attr("cx", 0)
    .attr("cy", (h / 2)-padding[2]/2)
    .attr("r",  function(d){ return d.r; })
....

Use the row function in d3.csv to add a property to each member of the array called r , and check the country name to determine which one gets the larger value. Then use that value wherever you need to mess with the radius.

I guess it would've been possible to check the country name everywhere the radius was impacted (eg .force("collide", d3.forceCollide(function(d) { return d.countryName === "Bhutan" ? (r + 4) * 1.33 : r * 1.33; }) , etc.). This feels a bit cleaner to me, but it might be cleaner still by abstracting out the radius from the data entries themselves...

Forked your plunk here: https://plnkr.co/edit/Tet1DVvHtC7mHz91eAYW?p=preview