javascript - D3.js，乘法元素

Question

我是 D3.js 新手。我正在尝试复制一个 SVG 组，但我不明白如何正确地进行。这是我的群组:

// external <g>
var group = svg.append("g");
group.attr("class", "myGroup");
group.append('circle')
.attr({cx:20,cy:100,r:4,fill:'black','fill-opacity':1,stroke:'red','stroke-width':0});

// inner <g> with line and text
var groupLine = group.append('g');
groupLine.append('line')
.attr({x1:20,y1:100,x2:20,y2:20,stroke:'black','stroke-width':0.4});
groupLine.append('text')
.text('texttext')
.attr({x:200,y:200,'text-anchor':'start','transform':'translate(-182,294) rotate(-90)'})
.style("font-family","Verdana")
.style("font-size","12px");

(在这里 fiddle :http://jsfiddle.net/n7Qs3/)

现在，基于一个简单的数组 ( D3.js, position elements horizontally )，我想乘以这个组，创建 6 个组并将它们水平放置。基本上，这个想法与古老的 Flash duplicateMovieClip 相同。

我该怎么办？

Answer 1

D3 中没有为此内置任何内容，但您可以使用 .cloneNode() :

var newNode = group.node().cloneNode(true);
svg.append(function() { return newNode; });

您唯一需要做的就是为每个副本设置偏移量:

newNode.setAttribute("transform", "translate(" + (i * 100) + ",0)");

完整演示 here .