javascript - d3 ClipPath - 为什么它会切断图表顶部？

Question

这个问题已经有答案了:

奥 git _a (1 个回答)

已关闭 7 年前。

我有一个图形，上面有三个折线图。

我在图表中添加了一个clipPath，覆盖了所有三个折线图。但每个折线图的顶部都被砍掉了。

我已经根据其他答案将 .nice() 添加到 y 轴，这有帮助但没有解决问题。当你用时间小部件放大时，效果非常明显:在线的最高点，2px的线正在变细。删除 Clip-path 的属性将使线条恢复到正确的效果。

cG.append("path")
    .attr("class","line line1")
    .attr("stroke",palette.basic[0])//predicted
    .attr("clip-path", "url(#clip)")
    .attr("d",line1[q](pricesPredicted));

有谁知道为什么会发生这种情况或如何阻止它？

谢谢

Answer 1

问题是 clipPath 和您要剪切的元素没有在同一坐标系中定义，并且不进行相同的变换。

所有 3 个图表都是从左上角开始绘制的。想象一下它们都画在彼此之上。

然后，应用 clipPath 并剪切图表。

最后，图表被翻译到它们的位置。

这是一个例子:

<svg>
  <defs>
    <clipPath id="clipPath">
      <rect x="0" y="0" width="100" height="100" />
    </clipPath>
  </defs>

  <circle cx="10" cy="10" r="20" style="clip-path: url(#clipPath);" transform="translate(10 10)" />
</svg>

您应该尝试将与应用于图表的相同转换应用到 clipPath。