D3.js：将路径附加到矩形

Question

我正在 D3.js 中绘制图表，并使用<rect>作为实际的图表区域（线条、绘图等）。 计划是只将路径附加到<rect>以便在用户拖动时它不会溢出图表区域。 现在它看起来像这样：

但是当我尝试这样做时：

var path = rect.append('path').attr(...)

路径本身甚至没有出现。 原始版本只是将路径附加到 svg，有效：

var path = svg.append('path').attr(...)

我也不能像常规 HTML 元素那样做overflow:hidden因为path不包含在rect 。

如果不可能或不推荐将path附加到rect ，那么限制路径的“活动区域”以使其不会导致溢出的最佳方法是什么？

Answer 1

您看不到rect内path的原因是因为 SVG rect元素不支持具有子元素，它们不是容器。

您需要做的是包含一个g （组）元素，它是一个容器，而是将您的rect和path放在其中。 这就是大量D3示例的工作方式，因为这意味着您可以与组交互，而不是与所有单独的子元素进行交互，如果您正在缩放/移动事物，这非常有用。

在你的情况下，如果你不希望你的线在rect之外可见，那么你可以简单地首先省略绘制这些点，或者在使用剪切路径绘制它们后剪切它们。

我整理了一个小例子来说明如何使用带有与您的用例相匹配的矩形的剪辑路径。 蓝色笔划说明将在没有剪辑路径的情况下填充的区域。 然而，一旦应用了剪辑路径，您可以看到实际填充区域比矩形的完整定义小得多。

 .fill { fill: steelblue; } .outline { stroke: steelblue; fill: none; }

 <svg width="300" height="300"> <defs> <clipPath id="demoClip"> <rect x="30" y="0" height="100" width="100"/> </clipPath> </defs> <rect class="fill" x="0" y="0" width="200" height="200" clip-path="url(#demoClip)"/> <rect class="outline" x="0" y="0" width="200" height="200"/> </svg>