D3.js：追加到rect的路径

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，那么限制＆＃34;活动区域的最佳方法是什么？路径，以免它导致溢出？

Answer 1

您无法在path内看到rect的原因是因为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>