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

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

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

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

---

提前感谢

我以前没有用过D3，但它似乎很容易理解。错误消息表示数组没有

appendChild（）

方法。我阅读了文档，发现选择返回为双节点（请参阅），因此您必须添加

[0][0]

（选择第一个节点）才能使用

appendChild（）

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

由于需要在每个节点中插入代码，因此可以使用

each（）

（请参见）如下所示：

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

---

<>我在你的代码上测试了它，它产生了一个黑色的圆圈，中间有一个白色的短线。这就是你所期望的吗？

我以前没有用过D3，但它似乎很容易理解。错误消息表示数组没有

appendChild（）

方法。我阅读了文档，发现选择返回为双节点（请参阅），因此您必须添加

[0][0]

（选择第一个节点）才能使用

appendChild（）

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

由于需要在每个节点中插入代码，因此可以使用

each（）

（请参见）如下所示：

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

---

<>我在你的代码上测试了它，它产生了一个黑色的圆圈，中间有一个白色的短线。这就是您所期望的吗？

正如@helderdarocha所解释的，您将d3方法与普通Javascript方法混为一谈。这个答案告诉了您如何使用普通Javascript方法，我将通过解释如何使用d3方法来平衡这一点

要在d3选择的每个元素中追加新元素，方法名仅为，而不是

appendChild

。要追加的参数要么是标记名（d3为选择中的每个元素创建该类型的新元素），要么是返回实际DOM元素的函数（将使用数据值和索引作为参数为选择中的每个元素调用该函数）。由于要克隆现有节点，因此要使用的版本是：

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

---

正如@helderdarocha所解释的，您将d3方法与普通Javascript方法混为一谈。这个答案告诉了您如何使用普通Javascript方法，我将通过解释如何使用d3方法来平衡这一点

要在d3选择的每个元素中追加新元素，方法名仅为，而不是

appendChild

。要追加的参数要么是标记名（d3为选择中的每个元素创建该类型的新元素），要么是返回实际DOM元素的函数（将使用数据值和索引作为参数为选择中的每个元素调用该函数）。由于要克隆现有节点，因此要使用的版本是：

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

---

使用这种方法需要注意的一点是，在运行

每个

函数后，

img

将只指向添加的最后一个图像，而不是所有图像。感谢helderdarocha，是的，这正是我试图实现的目标。非常令人印象深刻的是你找到了它。使用这种方法需要注意的一点是，在运行

每个
函数之后，
img
将只指向添加的最后一个图像，而不是所有图像。感谢helderdarocha，是的，这正是我试图实现的。非常令人印象深刻的是你发现了。再次感谢你，阿米莉亚伯。这就是我要寻找的简单语法。你对我混合使用纯java和d3方法的观察绝对是一窍不通。它们对我来说都是新的。再次谢谢你，阿米莉亚伯。这就是我要寻找的简单语法。你对我混合使用纯java和d3方法的观察绝对是一窍不通。他们对我来说都是新手。
var grps = d3.selectAll( "g" );
img = grps.append( function(){return svgNode.cloneNode( true );} );