Javascript 在我的d3图表中，附加的'rect'没有正确出现

在我的d3图表中，单击圆/点，我显示的是未正确显示的

矩形<代码>xScale

参考不正确

g.selectAll(".rect-elements")
  .data(data)
  .enter()
  .append("rect")
  .attr("class", "rect-elements")
  .attr("id", d => "rect_" + d.startTime)
  .attr("x", d => xScale(d.startTime) - 12.5)
  .attr("y", 0)
  .attr("width", 24)
  .attr("height", height + 5)
  .attr("data", d => d)
  .style("fill", "steelblue")
  .style("opacity", 0);

此参考不正确，它采用默认比例

xScale(d.startTime)

因为这个代码

if (data.length > 1) svg.call(zoom.transform, transform); //This is initial call on chart 

这是不正确的，它来到了默认的规模

xScale(d.startTime)

我试图恢复新的比例和使用，但d3.event不可用

let newXscale;
        if(d3.event)
            newXscale = d3.event.transform.rescaleX(xScale);
        else
            newXscale = xScale;

newXscale(d.startTime)

我缺少的任何指导

代码沙盒-