javascript - D3.js, multiply element -
I'm D3.js newbie I am trying to duplicate a SVG group but I do not understand That's how to do it correctly. This is my group:
// External & lt; G & gt; 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}); // internal and lieutenant; G & gt; Line and text with var groupLine = group.append ('g'); GroupLine.append ('line') .attr ({x1: 20, y1: 100, x2: 20, y2: 20, stroke: 'black', 'stroke-width': 0.4}); Group line. Append ('text'). Text ('Text Text') .attr ({x: 200, y: 200, 'text-anchor': 'start', 'conversion': 'translation (-182,294) will rotate (-90)'}). Style ("font-family", "verdana"). Style ("font-size", "12px"); (Bela here :)
Now, on the basis of a simple array (), I want to multiply this group, create 6 groups and have horizontal I want to make their status in the form. Basically, this idea is like the ancient flash duplicate movie clip I
There is nothing built in D3 for this, but you can use it:
var newNode = group.node (). CloneNode (true); Svg.append (return function () {newNode;}); The only thing you need to do is set offset for each copy:
newNode.setAttribute ("conversion", "translation ( "+ (I * 100) +", 0) "); Full demo
Comments
Post a Comment