D3.js 避免d3 v4散点图中的数据点重叠

我一直在研究v4中的d3可视化，这是一个散点/气泡图，其中的数据点已被图像填充（请参见JS Bin链接）

我遇到的问题是很多数据点重叠，所以我希望重叠点移动，直到它们彼此相邻（点的确切位置并不太重要）

我是d3新手，一直在努力学习模拟（碰撞检测、forceCollide等），希望能得到一些帮助

到目前为止，我的尝试导致初始x和y数据点被忽略，结果是一个不重叠的大圆圈。但是我想要的是保留初始的x和y值，并且只移动重叠的圆（所以离群值仍然应该是离群值）

我在JS-Bin（如下）上创建了一个示例来演示我所拥有的。特别是，力模拟代码（在取消注释simulation.stop（）；）时）似乎覆盖了初始的x和y值

我感觉我就快到了，但我做的事情顺序不对

  var simulation = d3.forceSimulation(data)
  .force('charge', d3.forceManyBody().strength(3))
  .force('collision', d3.forceCollide().radius(function(d) { return d.radius + 1 }) )
      .on('tick', function() {
        svg.selectAll('.node')
          .attr('cx', function(d) { return d.x; })
          .attr('cy', function(d) { return d.y; })
      })
  simulation.stop();

---

热图是否更适合这些数据？因此，在存在多个数据点的任何地方，它们都会被折叠成一个更高权重/颜色的组？对于这个特定任务，不，因为这是一个显示人们照片的可视化。我明白你的意思。。。是的，所以你需要使用一个重力为负的物体（因此图片倾向于围绕它们的位置分组，但相互推开）。虽然本例使用了圆形填充函数，但您可能需要修改逻辑，以避免矩形照片在拐角处重叠……本例还显示了如何将不同的节点组吸引到不同的中心点（可能与地理位置信息类似？）。吉姆在多焦点气泡图背后的思考方面做得很好，感谢你迄今为止的帮助。我还在挣扎，不知道哪里出了问题。我已经用一个JS Bin示例更新了我的问题。顺便说一句，X和Y值不是地理坐标，但实际上是一些PCA分析的前两个维度，因此它是具有相似特征的人的可视化。