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

Popular posts from this blog

Java - Error: no suitable method found for add(int, java.lang.String) -

java - JPA TypedQuery: Parameter value element did not match expected type -

c++ - static template member variable has internal linkage but is not defined -