D3.js，乘元素< g> [英] D3.js, multiply element <g>

问题描述

我是D3.js新手。我试图复制SVG组，但我不明白如何正确地做。这是我的群组：

I'm D3.js newbie. I'm trying to duplicate an SVG group but I can't understand how to correctly do it. This is my group:

// 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 here： http://jsfiddle.net/n7Qs3/ ）

(fiddle here: http://jsfiddle.net/n7Qs3/)

现在，基于一个简单的数组（D3.js，定位元素水平），我要乘以组，创建6组，并将其水平放置。基本上，这个想法是一样的古老的Flash 的duplicateMovieClip 。

Now, based on a simple array (D3.js, position elements horizontally), I want to multiply this group, creating 6 groups and position them horizontally. Basicly, the idea is the same as the ancient Flash duplicateMovieClip.

我该怎么办？

推荐答案

D3没有什么内置的，但你可以使用 .cloneNode（） ：

There's nothing built into D3 for this, but you can use .cloneNode():

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

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

The only thing you need to do is set the offset for each copy:

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

完成演示此处。

这篇关于D3.js，乘元素< g>的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！