各个符号在d3js中被剪裁

Question

我基本上试图剪辑包含＆＃34;路径＆＃34;表示数据点的元素。 看起来，路径元素最初并没有被转换成＃34;并保持在（0,0），因此被整个图表周围的矩形剪裁。

基本上，我已经取代了＆＃34; circle＆＃34;使用＆＃34;路径＆＃34;在D3 Brush Example中绘制的元素符号类型的元素＆＃34; circle＆＃34;。

.append("circle")
.attr("class", "point")
.attr("clip-path", "url(#clip)")
.attr("r", function(d){return Math.floor(Math.random() * (20 - 5 + 1) + 5);})
.attr("cx", function(d) { return x(d.index); })
.attr("cy", function(d) { return y(d.value); })

替换为

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

Here is jsfiddle。正如您所看到的，只有圆圈右下角可见，其余部分已被剪掉。到底是怎么回事？解决方案是什么？

修改 另外，实际的＆＃34;剪辑＆＃34;不适用于那些圈子（路径）。这是为什么？为什么它适用于＆＃34; circle＆＃34;但不是＆＃34;路径＆＃34;？