d3js - 水平缩放 linearGradient；隐藏垂直缩放

Question

我正在构建一个 d3js 图表，在同意与不同意的梯度范围内绘制一些点。我需要它能够缩放和平移，除了一个包含 linearGradient 的矩形外，我已经完成了所有这些工作。渐变按我的需要缩放，但它在水平和垂直方向上都放大了，超过了原来的 20px 高度：

或过度收缩：

我尝试使用显然不起作用的剪辑路径，剪辑路径似乎随渐变缩放。如何将矩形夹在轴上并保持相同大小？

这是我的 block

谢谢！！

Answer 1

据我所知，主要有两个挑战：

如您所记，矩形在 y 轴上填充了渐变刻度。
剪辑路径未按预期工作。

让我们删除剪辑路径，这会让事情变得更容易一些。其次，让我们在缩放时根本不缩放矩形（尽管我们可以保留应用的平移）。

既然我已经摧毁了我们拥有的东西，让我们把它重建起来。

我们不使用 transform(scale()) 来缩放矩形，而是直接修改它的宽度。如果 d3.event.transform.k 是我们缩放的因子（x 和 y），我们只修改矩形的宽度。而不是：

gradientScale
  .attr("transform","translate("+d3.event.transform.x+","+(height- spacer*3)+")scale("+d3.event.transform.k+")");

让我们使用：

gradientScale
  .attr("transform", "translate( " +d3.event.transform.x+ " , " + (height - spacer*3) + ")")
  .attr("width", width * d3.event.transform.k);

通过删除缩放比例，以上不会扭曲任何坐标，这不会导致 y 轴拉伸。它不会修改任何 y 坐标，因此条形图保持在高度相同的位置。

它确实修改了宽度 - 修改的量与我们之前缩放它的量相同（矩形在 k = 1 时的宽度是 width）。这样就实现了放大时比例尺的拉伸，x平移因子不变。

这是修改后的代码bl.ock。

在仔细观察之前，我最初的想法是尝试一种完全不同的方法。因此，为了比较，here's 一种完全不同的修改轴本身的方法。

d3js - 水平缩放 linearGradient；隐藏垂直缩放

d3js - Zoom linearGradient hoizontally; hiding the vertical scaling

javascript

css

svg

zooming

d3.js