javascript - 如何在 D3.JS 中使用圆内的 defs 元素

Question

我在 defs 标记内的 g 中有一个形状(绘制的云)。不幸的是，我无法使用 d3.js 在圆内使用此形状。这是我的代码: JSFiddle

我想要做的是显示 SVG 中所示圆圈内的 defs 标签中的形状。我以不同的方式尝试了很多次，但无法使用circle内的defs标签中的形状。有人可以帮我解决这个问题吗？先感谢您。

Answer 1

圆形不能包含其他形状。根据MDN docs它可能只包含 descriptive elements和 animation elements 。这些类别不包括圆形或使用等形状。

您应该创建一个父级 g 并将 circle 和 use 附加到其上，而不是嵌套形状:

// Create a `g`, rather than a `circle`, for each data point
var groups = svg.selectAll(".group").data(data).enter().append("g")
                 .attr("class", "group");

// Append a `circle` to the new g
groups.append("circle")
                 .attr("cx",100).attr("cy",100).attr("r",20);

// Append a `use` to the new g
groups.append("use").attr("xlink:href", "#mySymbol");

JSFiddle