Javascript D3.js：创建固定数量的元素

我试图使用D3创建固定数量的元素，从json文件中获取该值。这意味着，如果给定的json数据是n，我想将n元素打印到svg中

这是我的代码：

//定义svg元素的大小
var w=1000；
var h=50；
//定义数据集
d3.json（“people.json”，函数（数据集）{
//遍历json
对于（var i=0；i您可以这样做：


var数据集=[{
“姓名”：“拉里”，
“最后”：“第页”，
“国家”：“美国”，
“城市”：“山景”，
“年龄”：32
}, {
“姓名”：“谢尔盖”，
“last”：“Bean”，
“国家”：“美国”，
“城市”：“山景”，
“年龄”：37
}, {
“姓名”：“账单”，
“最后”：“大门”，
“国家”：“美国”，
“城市”：“西雅图”，
“年龄”：60
}, {
“名称”：“标记”，
“最后”：“扎克伯格”，
“国家”：“美国”，
“城市”：“帕洛阿尔托”，
“年龄”：35
}, {
“姓名”：“塞尔吉奥”，
“最后”：“马尔基奥尼”，
“国家”：“意大利”，
“城市”：“米兰”，
“年龄”：65
}];
//定义svg元素的大小
var w=1000；
var h=500；
var itemH=10；
var-itemW=3；
var=2；
//附加svg元素
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，w）
.attr（“高度”，h）；
//为数据集中的每个数据追加组
var group=svg.selectAll（“g”）
.数据（数据集）
.输入（）
.append（'g'）；
//每组
每组（功能（d，i）{
//控制台日志（d）；
var年龄=d年龄；
var self=d3.选择（此项）；
//在Y中变换组
self.attr（'transform'，function（））{
返回“translate（0），+（i*（itemH+padding））+”；
});
//从0开始追加rect forEach-年龄
d3.范围（年龄）forEach（功能（i）{
//控制台日志（i）；
self.append（'rect'）
.attr（'width'，itemW）
.attr（'高度'，项目H）
.attr（'x'，function（）{
返回i*（项目w+填充）；
});
});
})；
纯D3方法根本不需要for循环（如Gerardo Furtado在他的文章中提到的），并且将遵循以下原则：

d3.select("body").selectAll("svg")
  .data(dataset)              // Bind the entire dataset
  .enter().append("svg")      // Append one svg per object in dataset
  .selectAll("rect")
    .data(function(d) {       // Inherit data from svg by mapping of objects
      // Create an array of number of required rects
      return d3.range(d.age).map(function(d) { return d*15; }); 
    })
    .enter().append("rect")   // Append rects per svg
      .attr("x", function(d) {
        return d;             // Position was calculated in above mapping in data()
      });

这就是绘制图形所需的全部内容（属性放在一边）。有关设置所有值的完整示例，请参见以下示例：


var数据集=[{
“姓名”：“拉里”，
“最后”：“第页”，
“国家”：“美国”，
“城市”：“山景”，
“年龄”：32
}, {
“姓名”：“谢尔盖”，
“last”：“Bean”，
“国家”：“美国”，
“城市”：“山景”，
“年龄”：37
}, {
“姓名”：“账单”，
“最后”：“大门”，
“国家”：“美国”，
“城市”：“西雅图”，
“年龄”：60
}, {
“名称”：“标记”，
“最后”：“扎克伯格”，
“国家”：“美国”，
“城市”：“帕洛阿尔托”，
“年龄”：35
}, {
“姓名”：“塞尔吉奥”，
“最后”：“马尔基奥尼”，
“国家”：“意大利”，
“城市”：“米兰”，
“年龄”：65
}
];
//定义svg元素的大小
var w=1000；
var h=50；
//定义数据集
//d3.json（“people.json”，函数（数据集）{
d3.选择（“主体”）
.selectAll（“svg”）
.data（数据集）//绑定整个数据集
.enter（）.append（“svg”）//为数据集中的每个对象追加一个svg
.attr（“宽度”，w）
.attr（“高度”，h）
.selectAll（“rect”）
.data（函数（d）{//通过对象映射从svg继承数据
//创建所需矩形数的数组
返回d3.range（d.age）.map（函数（d）{returnd*15；}）；
})
.enter（）.append（“rect”）//根据svg追加rect
.attr（“宽度”，10）
.attr（“高度”，10）
.attr（“x”，函数（d）{
返回d；//在数据（）的上述映射中计算了位置
});
//})；
只需从rects绘图中删除
.data（dataset）
。这是错误的。感谢您的回答。但是删除它会导致以下错误：从json.html获取数据？\u ijt=4057q09d7k7p7tej2g0mf5objt:56未捕获类型错误：svg.selectAll（…）。enter不是函数（匿名函数）@get_data_from_json.html？让我免费给你一个建议：每次你想在D3可视化中使用fior循环时，问问自己：“这有必要吗？”，在98.7中℅ 在不需要的情况下（来源：FakeData Inc.）
selectAll
也放错了位置，比如
enter（）
。您只需要
append（“rect”）
并设置其属性。其名称为“象形图”。这是d3中一项非常基本的任务，在没有单个for循环的情况下创建你想要的。现在我在手机上，写起来很糟糕，但我相信很快会有人教你如何做。吹毛求疵，但d3的循环方式是函数式的，即
d3.range（age）。each（function（d，I）{…}）
@Duopixel你是说forEach吗？很好，我已经把它添加到我的答案中了。