D3JavaScript-使用数据绑定重复一组形状

我想特别重复一组形状 文本矩形文本圆 在圆圈中，又是圆圈的重复

我的数据是

Jsondata =[
{ "name":"A", "WidthOfRect":50, "justAnotherText":"250", "numberOfCircles" :3 }, 
{ "name":"B", "WidthOfRect":150, "justAnotherText":"350","numberOfCircles" :2 },
{ "name":"C", "WidthOfRect":250, "justAnotherText":"450","numberOfCircles" :1 }]

基本上根据这些数据，我正在尝试构建一个定制的条形图

rect的宽度基于json中rect的数据宽度，而圈数则基于numberofcircles属性

---

我寻找了许多选项来重复这组形状，但找不到一个

首先，你说得对：不要使用循环在D3代码中附加元素。此外，您关于数据长度的假设是正确的

回到问题上来：

文本和rect部分非常基本，D3101，所以让我们跳过它。圆圈是这里有趣的部分

我提出的解决方案涉及使用

d3.range

创建一个数组，其元素数量（或长度）由

numberOfCircles

指定。这包括两种选择

首先，我们创建组（这里，

scale

显然是一个量表）：

然后我们创建圆。注意

d3.范围

：

var circles = circlesGroups.selectAll(null)
  .data(function(d) {
    return d3.range(d.numberOfCircles)
  })
  .enter()
  .append("circle")
  //etc...

这是一个演示，我正在更改数据中的

numberOfCircles

，以绘制更多的圆：

var宽度=500，
高度=200；
var svg=d3.选择（“主体”）
.append（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）；
风险值数据=[{
“姓名”：“A”，
“有效宽度”：50，
“其他文本”：“250”，
“圈数”：13
},
{
“名称”：“B”，
“有效宽度”：150，
“其他文本”：“350”，
“圈数”：22
},
{
“姓名”：“C”，
“反射宽度”：250，
“其他文本”：“450”，
“圈数”：17
}
];
var scale=d3.scalePoint（）
.domain（data.map）（函数（d）{
返回d.name
}))
.范围（[20，高度-20]）
.填充（0.5）；
var colorScale=d3.scaleOrdinal（d3.SchemeCategory 10）；
var circlesGroups=svg.selectAll（空）
.数据（数据）
.输入（）
.附加（“g”）
.attr（“转换”，函数（d）{
返回“translate（20）”+scale（d.name）+”
})
.样式（“填充”，功能（d）{
返回色标（d.name）
})
var circles=circlesGroups.selectAll（空）
.数据（功能（d）{
返回d3.范围（d.圈数）
})
.输入（）
.附加（“圆圈”）
.attr（“r”，5）
.attr（“cx”，功能（d）{
返回10+12*d
});
var axis=d3.axisLeft（scale）（svg.append（“g”）.attr（“transform”，“translate（20,0）”））
如果您试图在数组中循环一个简单的for循环或array.forEach就可以了。是的，我可以用循环来完成，但是有没有其他方法，selectall会自动为数据长度添加形状，因此考虑使用它并以某种方式删除循环。让我知道你的想法。对不起，不知道有这样的图书馆。这真的很有帮助。谢谢。
var circles = circlesGroups.selectAll(null)
  .data(function(d) {
    return d3.range(d.numberOfCircles)
  })
  .enter()
  .append("circle")
  //etc...