Javascript d3重新定位时未应用刻度

我在d3中有一个图形，我在xaxis上使用它来将svg“画布”的x宽度缩放到我的数据中的值，这些值是在2020到2070年间随机分布的数字。x轴每隔10个刻度

我使用的比例是常数：

const x = d3.scaleLinear()
  .domain( d3.extent( data, d => d["x"] ) )
  .range( [0, pxX - 200] )
  .nice()

这将在图形上绘制圆心位于（cx，y2）和半径amt的圆，缩放效果良好，直到我重新定位以避免它们重叠：

svg.selectAll("circle .circles")
  .data(data)
  .enter()
  .append("circle")
  .attr( "transform", "translate(" + 100 + "," + 50 + ")")
  .attr("fill", d => {
    return d.colour}
  )
  .attr("cx", d => x(d.cx))
  .attr("cy", (d, index) => {

    let _y = y2(d.y2)
    
    if (_data[d.x].length > 1 && _data[i-1]) {
      i++
      // console.log("GROUP", _data[d.x][i -1].y2, i)
      _y =  _data[d.x][i -1].y2
    } else {
      i = 0
    }
    return _y
  })
  .attr("r", d => amt(d.amt));

这是我的循环，运行碰撞检查以查看圆是否重叠-ra是数据数组：

const loopOverData = (ra) => {
  
  console.log("STARTED LOOP");
  let result;
  for (let i = 1; i < ra.length; i++) {
    if (_newdata[i].cx === 0) {
      _newdata[i].cx += 2020
    }
    console.log("LOOP i: ", i)
    let k = 0;
    while (k < i)
      result = checkCollision(ra[i], ra[k]) ? ((ra[i].cx = (ra[i].cx + 2)), ra[i].y2 = y2(ra[i].y2 + 60), (k = 0)) : k++;
      console.log("RESULT", result, ra)
  }
  return setData(ra);
};

---

这是如何工作的，而另一个刻度不工作？

你有没有看过d3力？这一切都是为了你

const y2 = d3.scaleLinear()
  .domain([0, 100])
  .range( [0, 100] );