d3js - 水平缩放线性渐变；隐藏垂直缩放

Question

我正在构建一个 d3js 图表，该图表在同意不同意的渐变比例上绘制一些点。我需要它能够缩放和平移，除了一个持有线性渐变的矩形之外，我已经完成了所有这些工作。渐变会根据我的需要进行缩放，但它会在水平和垂直方向上放大，超过原来的 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 是一种完全不同的方法来修改轴本身。