javascript - 如何将 d3.xml 加载的 svg 附加到 svg 中

Question

尝试将外部 svgs 加载到动态创建的 svg 中，但仍访问已加载 svgs 的属性。这就是为什么我使用 d3.xml 但还没有弄清楚如何将其集成到使用 d3 创建的动态 svg 中。

代码和js控制台here 代码生成这个 svg

<svg id = "svgObj">
   <g class = "grp"></g>
   <g class = "grp"></g>
</svg>

我正在尝试在每个元素中加载circle.svg，因此它看起来像这样

<svg id = "svgObj">
   <g class = "grp"><svg id=minus>...</svg></g>
   <g class = "grp"><svg id=minus>...</svg></g>
</svg>

我尝试了下面的代码，但控制台错误提示没有appendChild方法

var grps = d3.selectAll( "g" );
img = grps.appendChild( svgNode.cloneNode( true ) );

先谢谢了

Answer 1

正如 @helderdarocha 所解释的，您将 d3 方法与普通 Javascript 方法混合在一起。该答案为您提供了如何使用简单的 Javascript 方法来实现这一点，我将通过解释如何使用 d3 方法来实现这一点。

要在 d3 选择的每个元素中附加新元素，方法名称很简单 append ，而不是 appendChild。要追加的参数可以是标签名称(d3 为选择中的每个元素创建该类型的新元素)，也可以是返回实际 DOM 元素的函数(将为选择中的每个元素调用该函数)数据值和索引作为参数)。由于您要克隆现有节点，因此这就是您要使用的版本:

var grps = d3.selectAll( "g" );
img = grps.append( function(){return svgNode.cloneNode( true );} );