d3 clipPath - 为什么它削减图表的顶部？ [英] d3 clipPath - why is it cutting top of charts off?

问题描述

我有一个有三个线图的图形。

I have a graphic with three line graphs on it.

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

I've added a single clipPath to the chart, covering all three line graphs. But the top of each line chart is being chopped off.

根据其他SO答案，我已经将.nice（）添加到y轴，这有助于但不能解决问题。当您使用时间小部件放大时，效果非常明显：在线的最高点，2px线被细化。删除clip-path的属性会返回正确的效果。

I've added .nice() to the y axes, based on other SO answers, which has helped but not fixed the problem. When you zoom in with the time widget, the effect is very obvious: at the highest point of the line, the 2px line is being thinned. Getting rid of the attribute for clip-path returns the lines to their proper effect.

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

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

Does anyone know why this is happening or how to stop it?

感谢

推荐答案

问题是 clipPath 和您剪裁的元素未在同一坐标系中定义，且不受相同的转换。

The problem is that the clipPath and the elements you are clipping are not defined in the same coordinate system and are not subject to the same transforms.

全部3图表从左上角开始绘制。

All 3 charts are drawn starting from the top left corner. Imagine them all drawn on top of each other.

然后，应用 clipPath 并截断图表

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

Finally the charts are translated to their place.

这里有一个例子：

<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 应用相同的变换。

You should try and apply the same transform to the clipPath that you are applying to your charts.

这篇关于d3 clipPath - 为什么它削减图表的顶部？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！