d3js中的缩放线

Posted 2023-02-22

【中文标题】d3js中的缩放线

【英文标题】：Zooming lines in d3js

【发布时间】：2015-08-05 13:32:25

【问题描述】：

我只是想通过使用 d3.js 库在 javascript 中绘制一个函数。我需要添加缩放和平移事件。我已经按照这个例子做到了：

http://bl.ocks.org/mbostock/7ec977c95910dd026812

我在这架飞机上画了一些线。 我的问题是，当我缩放它时，线宽也会改变。 我喜欢的是那条线在缩放时仍然具有原始宽度。我想我必须重新绘制它，但我不确定这是否是最好的方法。

你能告诉我是否有更好的方法，或者给我看任何简单的例子吗？ 谢谢！

【问题讨论】：

见this example——你需要所谓的语义缩放。

【参考方案1】：

由于您没有提供任何代码，因此有点难以判断。根据您的描述，您正在渲染的网格线正在被缩放矩阵转换。

您可以独立于缩放来绘制网格，但您必须在缩放和网格变换之间切换，并且需要更多代码，或者只需重新渲染网格线，其宽度设置为宽度乘以反向比例。例如，如果您的网格线是两个像素，那么您可以通过将它们的渲染宽度设置为2*(1/scale) 来保持它们的宽度，这与2/scale 相同。比例是缩放的量。这同样适用于您希望保持固定渲染大小的任何对象。

没有简单的方法可以避免重新渲染网格线

【参考方案2】：

这就是我要找的东西：

http://www.w3.org/TR/SVGTiny12/painting.html#NonScalingStroke

【讨论】：

浏览器支持可能是相关的，但看起来很暗淡：***.com/questions/29792252/…