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

benjaminz 发表于 Dev

本杰明兹

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

但是当我尝试做的时候：

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

路径本身甚至不显示。原始版本只是为了将路径附加到svg上，这是可行的：

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

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

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

伊恩

之所以看不到path内部的rect原因是因为SVGrect元素不支持具有子元素，它们不是容器。

您需要做的是包含一个g（group）元素，该元素是一个容器，而是将您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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。