Javascript 我的长方形don'；如果d3中没有缩放事件，则无法获得良好的坐标

我正在放大图表。但我有个问题。 我的矩形需要缩放事件才能显示在正确的位置，如果它们没有此事件，则显示在错误的坐标处

我做了一件事

问题在于代码的这一部分（我认为）

除x和y坐标外，所有属性都正常工作。 但当我用缩放事件更新坐标时，它们会显示在正确的位置

change(d) {
    var newX = d.transform.rescaleX(this.x);
    var newY = d.transform.rescaleY(this.y);

    this.xAxis.call(d3.axisBottom(newX))
    this.yAxis.call(d3.axisLeft(newY))

      this.chart.selectAll("#rectangle")
       .attr("x", d => newX(d.x) - 2)
       .attr("y", d => newY(d.y) - 5 )
  },

这是

this.x

和

this.y

  this.x = d3.scaleLinear()
    .range([0, width - margin.left - margin.right]);

  this.y = d3.scaleLinear()
    .range([height - margin.top - margin.bottom, 0]);

  this.xAxis = this.chart.append("g")
    .attr(
      "transform",
      `translate(0, ${height - margin.top - margin.bottom})`
    );

  this.yAxis = this.chart.append("g");

---

有人有办法解决我的问题吗？

您的代码有多个错误，以下是要点：

您添加一个

元素，并根据

x

和

y

设置其

transform

（我在小提琴中看到了它，而不是在问题的代码示例中看到的），就可以了

在每个

下添加一个

，并将相同的

id

分配给所有人。它不起作用，

id

应该是唯一的。您根本不需要该属性，请忽略它

不能对

元素使用

x

和

y

属性。您应该使用transform:

g.attr（'transform'，'translate（x，y）'）

在“更改”中，您尝试在其

内设置

坐标，而不是将新的

变换

指定给

元素本身。保持

原样

您可以使用一个简单的公式计算

transformedX=originalX*e.transform.k+e.transform.x

，其中

e

是D3缩放事件

---

你好@MichaelRovinsky，我用你的评论更新了我的代码（我想），但我还有一个错误。基本上，在没有事件的情况下，它们是一个好地方，但是当我有一个缩放事件时，它们会使用奇怪的坐标。我在这里用你的小提琴做了一个实验：在缩放/平移过程中看红色圆圈，看看如何管理坐标。圆的初始坐标是（100100），它们正在按照我在回答中描述的方式进行转换。好的，我理解，但当我想显示多个“圆”时，它只是显示的第一个圆（我已经尝试过放置一个“selectAll”（“圆”）但它不起作用。我们不能在同一个圆圈中打印多个圆圈。追加？您只需要在第48行用

selectAll

替换

  this.x = d3.scaleLinear()
    .range([0, width - margin.left - margin.right]);

  this.y = d3.scaleLinear()
    .range([height - margin.top - margin.bottom, 0]);

  this.xAxis = this.chart.append("g")
    .attr(
      "transform",
      `translate(0, ${height - margin.top - margin.bottom})`
    );

  this.yAxis = this.chart.append("g");