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

我之前没有使用过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 ) );
});

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

Answer 2

正如@helderdarocha所解释的那样，你将d3方法与普通的Javascript方法混合在一起。这个答案给了你如何用简单的Javascript方法做到这一点，我将通过解释如何用d3方法来解决这个问题。

要在d3选择的每个元素中追加新元素，方法名称只是append，而不是appendChild。要追加的参数是标签名称（d3为选择中的每个元素创建该类型的新元素）或者返回实际DOM元素的函数（将使用选择中的每个元素调用该函数）数据值和索引作为参数）。由于您正在克隆现有节点，因此您需要使用该版本：

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

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

2 个答案: