d3 clipPath - 为什么要切断图表顶部？ [复制]

【问题标题】：d3 clipPath - why is it cutting top of charts off? [duplicate]d3 clipPath - 为什么要切断图表顶部？ [复制]
【发布时间】：2016-06-29 17:38:02
【问题描述】：

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

我在图表中添加了一个 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));

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

谢谢

【问题讨论】：

标签： javascript d3.js clip

【解决方案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 应用与图表应用相同的转换。

【讨论】：