如何在D3.JS

Question

中使用圆圈内的defs元素我在defs标记内的g中有一个形状（绘制的云）。不幸的是，我无法在使用d3.js的circle内使用此形状。这里是我的代码： JSFiddle

我想要做的是显示那个形状，它是在SVG中显示的圆内的defs标签。我以不同的方式尝试过很多次，但我无法使用circle中defs标签的形状。任何人都可以请这个问题协助我吗？先谢谢你。

Answer 1

A circle不能包含其他形状。根据MDN docs它可能只包含descriptive elements和animation elements。这些类别不包括形状，如circle或use。

而不是嵌套你的形状，你应该创建一个父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