Question

我的图形上有三个折线图。

我在图表中添加了一个clipPath，涵盖了所有三个折线图。但每个折线图的顶部正在被切断。

我已根据其他SO答案将.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并删除图表。

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

以下是一个例子：

＆＃13;

<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>

＆＃13;

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

d3 clipPath - 为什么它会削减图表的顶部？

1 个答案: