Javascript D3.js，乘法元素<；g>；

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

//外部
var group=svg.append（“g”）；
集团属性（“类别”、“myGroup”）；
group.append（'circle'））
.attr（{cx:20，cy:100，r:4，fill:'black'，'fill-opacity'：1，stroke:'red'，'stroke-width'：0}）；
//用线条和文字填充内部
var groupLine=group.append（'g'）；
groupLine.append（'line'））
.attr（{x1:20，y1:100，x2:20，y2:20，笔划：'black'，'stroke-width'：0.4}）；
groupLine.append（'text'）
.text（'texttext'）
.attr（{x:200，y:200，'text-anchor'：'start'，'transform'：'translate（-182294）rotate（-90）}）
.style（“字体系列”、“Verdana”）
.style（“字体大小”、“12px”）；

（这里拉小提琴：）

现在，基于一个简单的数组（），我想将这个组相乘，创建6个组并将它们水平放置。基本上，这个想法与古代的Flash

duplicateMovieClip

是一样的

---

我该怎么办呢？

D3中没有内置任何功能，但您可以使用：

您只需为每个副本设置偏移量：

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

---

完成演示。

这是我如何“克隆”多个按钮的

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

d3.选择（“某个id”）
.附加（“div”）
.attr（“类”、“某些其他id”）
.每个功能（d）{
对于（变量i=1；i

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

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

所以我想你可以这样做：创建一个div，attach.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");
    }
    };)

。每个（函数（d）{
对于（变量i=1；i

您定义的属性错误。所有属性标签都必须用双引号括起来，如下所示

attr（{“cx”：20}）

。这在这里是不会发生的。如果我没有错的话，这里你想根据数组中的数据数量创建组，对吗？@UnknownUser:没问题，我会纠正它（即使我现在所做的似乎有效）。是的，我想乘以那个物体，但怎么做呢？我只是问这个…：-）无论如何，我发现了很多没有引用cx的资源（例如：）谢谢。我学到了一些新东西。检查是否有帮助。这里是根据数组中数据的数量创建的组的数量。我知道如何乘以圆，但还是要感谢：-）你得到了你想要的吗？好的，这就是我想要的，谢谢。是否可以在不循环的情况下使用cloneNode（即，使用首选的d3.js语法，如UnknownUser fiddle中所示）？您每次都必须运行代码进行克隆。不过，您可以在

.append（）

中进行克隆。非常感谢您，Lars:-）如果有一个D3功能，可以让您构建自定义符号并重用它，那就太好了。

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