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

Question

尝试将外部 svg 加载到动态创建的 svg 中，但仍可以访问加载的 svg 的属性。这就是为什么我使用 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。 append 的参数要么是标签名称（d3 为选择中的每个元素创建一个该类型的新元素），要么是返回实际 DOM 元素的函数（该函数将为选择中的每个元素调用数据值和索引作为参数）。由于您正在克隆现有节点，因此这就是您要使用的版本：

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

Answer 2

我以前没有使用过 D3，但它似乎很容易理解。错误消息说 Array 没有 appendChild() 方法。我阅读了文档并发现选择返回为双节点（请参阅Operating on selections），因此您必须添加[0][0]（将选择第一个节点）才能使用appendChild()。

这会使用普通 DOM 选择第一个节点并且不会产生错误（并在输出上绘制部分形状）：

var grps = d3.selectAll( "g" )[0][0];

由于您需要在每个节点中插入代码，您可以像这样使用each()（参见Control）：

d3.selectAll( "g" ).each(function() {
    img = this.appendChild( svgNode.cloneNode( true ) );
});

我在您的代码上对其进行了测试，它产生了一个中间有一个白色破折号的黑色圆圈。这是您的预期吗？