如何在 d3 中处理 Beeswarm 图中的碰撞？

Question

我一直在玩这个例子here 一段时间。我正在尝试做的是突出显示图中的单个节点/圆圈（通过使用边框使其变大；稍后我也想在其中添加文本或字母）。

目前，我在图中将Bhutan 的圆圈放大了，如下所示：

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

但是，它与其他圆圈重叠。避免这些冲突/重叠的最佳方法是什么？提前致谢。

链接到 Plunkr - https://plnkr.co/edit/rG6X07Kzkg9LeVVuL0PH?p=preview

---

我尝试了以下在不丹圈内添加一个字母

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

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

Answer 1

这与这里的问题略有不同：How to change the size of dots in beeswarm plots in D3.js

你有几个我能想到的选择：

• 将forceCollide 设置为您的largest possible radius * 1.33，例如(r + 4) * 1.33。这样可以防止重叠，但会分散很多东西，看起来不太好。
• 将 radius 属性添加到数组中的每个条目，并以此为基础使碰撞工作，这看起来会更好一些，但对于大型集合来说表现不那么出色。

这是一个如何做到这一点的示例：

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

使用d3.csv 中的row 函数为数组的每个成员添加一个名为r 的属性，并检查国家名称以确定哪个值更大。然后在任何需要弄乱半径的地方使用该值。

我想可以在半径受到影响的所有地方检查国家名称（例如.force("collide", d3.forceCollide(function(d) { return d.countryName === "Bhutan" ? (r + 4) * 1.33 : r * 1.33; }) 等）。这对我来说感觉有点干净，但通过从数据条目本身中抽象出半径可能会更干净......

在这里分叉你的 plunk：https://plnkr.co/edit/Tet1DVvHtC7mHz91eAYW?p=preview