d3js - 放大线性梯度;隐藏垂直缩放

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修改轴本身的方法完全不同。