Javascript 单个符号在d3js中剪裁

我基本上是想剪辑一个包含代表数据点的“路径”元素的图表。 看起来，路径元素最初并没有被“转换”，而是保持在（0,0）位置，因此被整个图表周围的矩形剪裁

基本上，我已经用符号类型为“圆”的“路径”元素替换了中绘制的“圆”元素

替换为

.append("path")
.attr("class", "point")
.attr("clip-path","url(#clip)")
.attr("d", d3.svg.symbol().type("circle"))

。正如您所看到的，只有圆圈右下角的四分之一可见，其余部分已被剪掉。发生了什么事？解决办法是什么

编辑：

---

此外，实际的“剪裁”对这些圆（路径）不起作用。为什么呢？为什么它适用于“圆圈”而不适用于“路径”？

当您希望人们调试您的小提琴时，请禁用动画。每次单击画布时，所有点都会朝y轴移动。这使得使用检查器变得不可能。另外，您可能希望将点/圆添加到组元素（）中以便于处理。@LarsKotthoff我尝试过：svg.append（“defs”）.append（“clipPath”）.attr（“clipPathUnits”、“objectBoundingBox”）.append（“rect”）.attr（“width”，100）.attr（“height”，100）；但是rect（100x100）并没有用作剪切路径，我认为整个svg就是剪切路径。设置clipPathUnits后如何定义剪辑路径的维度？好吧，对你来说最简单的方法是将剪辑路径放在包含所有符号的

g

元素上。明白了。1.附加剪辑路径2。追加定义剪裁边界的矩形3。附加“g”元素并分配剪辑url 4。将数据点附加到“g”元素

.append("path")
.attr("class", "point")
.attr("clip-path","url(#clip)")
.attr("d", d3.svg.symbol().type("circle"))