有没有一种方法可以在放大D3时不改变线条的大小

Question

当我放大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)
}
)
},

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

Answer 1

您有两个选项：

1. 不要将您的<line>置于转换后的<g>之下。处理缩放事件时，重新计算线端点坐标并更新<line>属性(x1、y1和x2以及y2(
2. 根据缩放因子设置线条的stroke-width：strokeWidth = 1 / e.transform.k(我不喜欢这个选项，但它可以工作(