Javascript 在D3中放大时，有没有办法不改变线的大小？

我试图在缩放svg时删除行的大小更新

基本上我的路线是这样的

points = [[this.x(first.longitude), this.y(0)], [this.x(first.longitude), this.y(first.altitude)]];
        this.line[i] = this.chart
        .append('path')
        .attr('d', curveafter(points))
        .attr('p', id.segmentName)
        .attr('stroke', "black")
        .attr('fill', 'none')
        .on('click', this.filter)
        .attr("stroke-width", 1)

updateChart(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.line.forEach((line) => {
        line
        .attr("transform", d.transform)
        .attr("stroke-width", 1)
        }
      )
  },

当我缩放时，我会像那样更新直线的位置

points = [[this.x(first.longitude), this.y(0)], [this.x(first.longitude), this.y(first.altitude)]];
        this.line[i] = this.chart
        .append('path')
        .attr('d', curveafter(points))
        .attr('p', id.segmentName)
        .attr('stroke', "black")
        .attr('fill', 'none')
        .on('click', this.filter)
        .attr("stroke-width", 1)

updateChart(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.line.forEach((line) => {
        line
        .attr("transform", d.transform)
        .attr("stroke-width", 1)
        }
      )
  },

但当我缩放时，线条的大小会增加，而当我缩小时，线条的大小会减小。 如何阻止笔划宽度（大小）并且无论我做什么都不移动它？

您有两个选项：

不要将您的

放在已转换的

下。处理缩放事件时，重新计算线端点坐标并更新属性（x1，y1，x2，y2）

根据缩放因子设置线条的

笔划宽度

：

strokeWidth=1/e.transform.k

（我不喜欢这个选项，但它可以工作）