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");

（小提琴：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。

Answer 2

这就是我克隆＆＃39;多个按钮。

    d3.select("#some_id")
      .append("div")
      .attr("class","some_other_id")
      .each(function(d) {

    for (var i = 1; i < number_to_duplicate; i++) {
        d3.select("#some_other_id")
          .append("button")
          .attr("type","button")
          .attr("class","btn-btn")
          .attr("id",function(d) { return 'button '+i;})
          .append("div")
          .attr("class","label")
          .text(function(d) { return 'button '+i;})
    }
    };)

我创建div和.each（函数）。在函数中，for循环创建按钮。

出于您的目的，您将更改包括（x：x乘以i）的属性以进行定位。但无论如何，这是我使用不同ID制作按钮或类似元素的非常简单的解决方案。标签可以连接在循环外面。

所以我猜你可以这样做：创建一个div，附加.each，在每个包含for循环的函数中调用一个函数，使用i作为位置的乘数：

    .each(function(d) {

    for (var i = 1; i < number_to_duplicate; i++) {
     d3.select("#some_other_id")
       .append('line')
       .attr({x1:20*i,y1:100,x2:20*i,y2:20,stroke:'black','stroke-width':0.4});
       .text('texttext')
       .attr({x:200*i,y:200,'text anchor':'start','transform':'translate(-182,294) rotate(-90)'})
       .style("font-family","Verdana")
       .style("font-size","12px");
    }
    };)

D3.js，乘以元素<g> </g>

2 个答案: