Javascript 如何处理d3中蜂群图中的碰撞？

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

目前，我在图中把

不丹

的圆圈画得更大，如下所示：

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

然而，它与其他圆圈重叠。避免这些碰撞/重叠的最佳方法是什么？提前谢谢

链接到Plunkr-

---

我试着在不丹圈内添加一个字母

    //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-

这是一个与此问题略有不同的问题：

我可以想到你有几个选择：

• 将

  力碰撞

  设置为您的

  最大可能半径*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（“碰撞”，d3.forceCollide（函数（d）{return d.countryName==“不丹”？（r+4）*1.33:r*1.33；}）

，等等）.这让我感觉有点干净，但通过从数据项本身提取半径，可能会更干净

---

这是一个很好的解决方案。谢谢！另一方面，我想给不丹圈加上一封信。有什么建议吗？我会在我的问题上加上我已经尝试过的内容。我真的想不出一个好办法来做这件事——也许以后可以再做。好答案，投赞成票。不过，我很好奇：为什么两个不同的用户几乎同时问我的代码？可能是作业吧？@GerardoFurtado我被这个问题困扰了一段时间，然后当我看到Dan回答一个关于同一个图表的问题时。我想现在是问lol的好时候，我希望我还在大学做作业：）