Javascript D3遍历内部JSON

我是D3新手，这意味着我不太清楚像JSON这样的复杂数据集是如何处理的，通常当我遍历JSON时，我会使用一堆嵌套的

来处理
循环之类的事情，D3似乎会为我处理这些事情

我在学习D3中有关数据绑定的教程，并得出以下结论：

 var dataset = [{
  "bread": "Honey Bread",
  "ingredients": [{
    "ingredient": "Whole Wheat Flour",
    "quantity": 1
  }, {
    "ingredient": "Water",
    "quantity": 1
  }, , {
    "ingredient": "Honey",
    "quantity": 1
  }, {
    "ingredient": "Yeast",
    "quantity": 1
  }, , {
    "ingredient": "Salt",
    "quantity": 1
  }]
}, {
  "bread": "Grain Bread",
  "ingredients": [{
    "ingredient": "Freshly Milled Whole Wheat Flour",
    "quantity": 1
  }, {
    "ingredient": "Water",
    "quantity": 1
  }, , {
    "ingredient": "Honey",
    "quantity": 1
  }, {
    "ingredient": "Yeast",
    "quantity": 1
  }, , {
    "ingredient": "Salt",
    "quantity": 1
  }]
}]
var svg = d3.select(".images")
  .append("svg")

var circles = svg.selectAll("circle")
  .data(dataset)
  .enter()
  .append("circle");

circles.attr("cx", function(d, i) {
    return (i * 50) + 25;
  })
  .attr("cy", function() {
    return 25;
  })
  .attr("r", function(d) {
    console.log(d);

    for (var i = 0; i < d.ingredients.length; i++) {
      return d.ingredients[i].quantity;
    }
  })

var数据集=[{
“面包”：“蜂蜜面包”，
“成分”：[{
“配料”：“全麦面粉”，
“数量”：1
}, {
“成分”：“水”，
“数量”：1
}, {
“配料”：“蜂蜜”，
“数量”：1
}, {
“成分”：“酵母”，
“数量”：1
}, {
“配料”：“盐”，
“数量”：1
}]
}, {
“面包”：“谷物面包”，
“成分”：[{
“配料”：“新鲜磨碎的全麦面粉”，
“数量”：1
}, {
“成分”：“水”，
“数量”：1
}, {
“配料”：“蜂蜜”，
“数量”：1
}, {
“成分”：“酵母”，
“数量”：1
}, {
“配料”：“盐”，
“数量”：1
}]
}]
var svg=d3。选择（“.images”）
.append（“svg”）
var circles=svg.selectAll（“圆”）
.数据（数据集）
.输入（）
.附加（“圆圈”）；
圆。属性（“cx”，函数（d，i）{
返回（i*50）+25；
})
.attr（“cy”，函数（）{
返回25；
})
.attr（“r”，函数（d）{
控制台日志（d）；
对于（变量i=0；i

它工作正常，我的问题是最后的
返回
，这意味着它到达第一个对象节点并退出循环，只分配一个（
1
）数量

那么，我如何才能做到这一点，从而为每种成分画出一个圆圈呢？我是否使用了不同的方法，或者我的代码只是需要调整？
由于dataset变量包含两个对象（每个对象都是一种带配料的面包），并且由于要将“dataset”绑定到“圆圈”，因此只会得到两个圆圈（每个面包一个）

如果您希望半径是成分数量的函数（它看起来有点像您想要的），您只需要在半径函数中返回d.contracents.length

如果希望每个配料都有一个圆，则需要将配料绑定到“圆”，而不是父面包对象。实现这一点的一种方法是创建一个配料对象数组，该数组具有它们所处面包类型的属性：var配料=[{名称：蜂蜜，数量：5，面包：蜂蜜面包}，…]。如果将其绑定到圆圈，则每个成分都会得到一个圆圈，并且可以根据面包的类型为圆圈选择颜色，例如，如果您试图一次显示多个面包食谱
 由于dataset变量包含两个对象（每个对象都是一种含配料的面包），并且由于要将“dataset”绑定到“圆圈”，因此只能得到两个圆圈（每个面包一个）

如果您希望半径是成分数量的函数（它看起来有点像您想要的），您只需要在半径函数中返回d.contracents.length

如果希望每个配料都有一个圆，则需要将配料绑定到“圆”，而不是父面包对象。实现这一点的一种方法是创建一个配料对象数组，该数组具有它们所处面包类型的属性：var配料=[{名称：蜂蜜，数量：5，面包：蜂蜜面包}，…]。如果将其绑定到圆圈，则每个成分都会得到一个圆圈，并且可以根据面包的类型为圆圈选择颜色，例如，如果您试图一次显示多个面包食谱
 首先，使用数据集中最顶层，可以创建2个
元素

var breads = svg.selectAll(".bread")
  .data(dataset)
  .enter().append("g")
  .attr("class", "bread");

由于最顶层有两个元素，上面的代码将创建两个
元素

var breads = svg.selectAll(".bread")
  .data(dataset)
  .enter().append("g")
  .attr("class", "bread");

然后，您可以使用
面包
元素创建嵌套成分：

// For each bread get the ingredients, then bind
// and create a circle element for each associated ingredient
var ingredients = breads.selectAll(".ingredients")
  .data(function(d) {
    return d.ingredients;
  })
  .enter().append("circle")
  .attr("class", "ingredient");

完整工作示例：


var数据集=[{
“面包”：“蜂蜜面包”，
“成分”：[{
“配料”：“全麦面粉”，
“数量”：1
}, {
“成分”：“水”，
“数量”：1
}, {
“配料”：“蜂蜜”，
“数量”：1
}, {
“成分”：“酵母”，
“数量”：1
}, {
“配料”：“盐”，
“数量”：1
}]
}, {
“面包”：“谷物面包”，
“成分”：[{
“配料”：“新鲜磨碎的全麦面粉”，
“数量”：1
}, {
“成分”：“水”，
“数量”：1
}, {
“配料”：“蜂蜜”，
“数量”：1
}, {
“成分”：“酵母”，
“数量”：1
}, {
“配料”：“盐”，
“数量”：1
}]
}];
var svg=d3.选择（“svg”）；
var breads=svg.selectAll（“.bread”）
.数据（数据集）
.enter（）.append（“g”）
.attr（“转换”，函数（d，i）{
返回“translate（0，+i*100+”）；
})
.attr（“类”、“面包”）；
//画圆圈
var配料=面包。选择全部（“配料”）
.数据（功能（d）{
返回d.原料；
})
.enter（）.append（“圆”）
.attr（“类别”、“成分”）
.attr（“r”，40）
.attr（“cx”，函数（d，i）{
返回2*40*（i+1）；
})
.attr（“cy”，100）；
//添加配料标签
变量标签=面包。选择全部（“.label”）
.数据（功能（d）{
返回d.原料；
})
.enter（）.append（“文本”）
.attr（“类别”、“标签”）
.attr（“x”，函数（d，i）{
返回2*40*（i+1）；
})
.attr（“y”，100）
.文本（功能（d）{
返回d.成分；
});
{
填充物：黄色；
笔画：红色；
笔画宽度：2；
}
.标签{
文本锚定：中间；
}
首先，使用数据集中最顶层，您可以创建2个
元素

var breads = svg.selectAll(".bread")
  .data(dataset)
  .enter().append("g")
  .attr("class", "bread");

由于最顶层有两个元素，上面的代码将创建两个
元素

var breads = svg.selectAll(".bread")
  .data(dataset)
  .enter().append("g")
  .attr("class", "bread");

然后，您可以使用
面包
元素创建嵌套成分：

// For each bread get the ingredients, then bind
// and create a circle element for each associated ingredient
var ingredients = breads.selectAll(".ingredients")
  .data(function(d) {
    return d.ingredients;
  })
  .enter().append("circle")
  .attr("class", "ingredient");

完整工作示例：


var数据集=[{
“面包