d3 clipPath - 为什么它会切断图表的顶部？

Question

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

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

我已经根据其他 SO 答案将 .nice() 添加到 y 轴，这有助于但没有解决问题。当你用时间部件放大时，效果非常明显：在线条的最高点，2px 的线条正在变细。摆脱 clip-path 的属性 returns 线条以达到适当的效果。

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。

d3 clipPath - 为什么它会切断图表的顶部？

d3 clipPath - why is it cutting top of charts off?

javascript

clip

d3.js