Javascript 避免气泡图中的碰撞

我试图制作一个水平气泡图，但我不知道如何避免气泡之间的碰撞。每个泡沫代表一年，可以有任何价值和大小而不发生碰撞。我怎样才能解决这个问题

D3版本

<script src="https://unpkg.com/d3@5.15.0/dist/d3.min.js"></script>

---

您可以堆叠气泡，而不必确切说明它们将被放置在何处，而是将它们有条件地放置到上一个位置

var currentCx = 0
const size_factor = 2

data = data.map(yearData => {
currentCx += yearData.value*size_factor
const _currentCx = currentCx

// This line is repeated, because the center of circle, 
// Is exctracted in the middle of the two sums
currentCx += yearData.value*size_factor
const _radius = yearData.value*size_factor

return {...yearData, cx: _currentCx, radius: _radius }
})

您可以在attr中按原样使用cx，和半径值

.attr("cx", function(d, i) {
  return d.cx;
})
.attr("cy", function() {
  return 100;
})
.attr("r", function(d) {
 return d.radius;
})

另外，不要忘记相应地修改文本位置，并生成var数据（而不是const）

.attr("cx", function(d, i) {
  return d.cx;
})
.attr("cy", function() {
  return 100;
})
.attr("r", function(d) {
 return d.radius;
})