首先,_plotPolygons
方法中的 polygon-label
类的文本位置是根据 _zx
和 _zy
这两个缩放后的比例尺计算得到的。这意味着如果这些比例尺没有正确更新或者在缩放时没有被正确使用,那么标签的位置就会出错。
在 zoomed
函数中,你可以看到对于诸如 circle
, .linestring-path
, .polygon-path
的缩放处理是通过更新属性 cx
, cy
, d
来实现的。但是对于 text.polygon-label
的处理,似乎有些不一致:
js
.attr('x', (d) => {zx(d.data[0] ? d.data[0] : d[0])})
.attr('y', (d) => {zy(d.data[1] ? d.data[1] : d[1])});
在上述代码中,x
和 y
属性的设置函数中使用了 {}
而不是直接返回计算结果,这将导致函数没有实际返回任何值,因此 x
和 y
属性并未被正确设置。
正确的写法应该直接返回计算结果,例如:
js
.attr('x', (d) => zx(d.data[0] ? d.data[0] : d[0]))
.attr('y', (d) => zy(d.data[1] ? d.data[1] : d[1]));
同时,请确保 d.data[0]
和 d.data[1]
正确指向了标签应该位于的坐标点。假设 d.data
是一个包含两个元素的数组,其中第一个元素是 x 坐标,第二个元素是 y 坐标。
最后,确保 _zx
和 _zy
在 zoomed
函数调用之前已经正确地被更新。如果这些比例尺在缩放事件发生时没有更新,那么标签的位置也会出错。
总结一下,解决位置错误的问题可能需要以下几个步骤:
- 确保在
zoomed
函数中正确更新polygon-label
的x
和y
属性。 - 检查
d.data
是否正确地代表了标签的坐标。 - 确保
_zx
和_zy
在缩放事件发生时被正确更新。