我试图让 d3 遍历数据中的子数组并生成多个饼图。
这是完整的代码（来自https://gist.github.com/mbostock/1305111 和https://gist.github.com/enjalot/1203641）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>D3 Page Test</title>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
<style type="text/css">
body {
text-align: center;
}
</style>
</head>
<body>
<script type="text/javascript">
// Define the data as a two-dimensional array of numbers. If you had other
// data to associate with each number, replace each number with an object, e.g.,
// `{key: "value"}`.
var datad = [
{s:[ 20, 1, 1], l:[10,100]},
{s:[ 1, 20, 1], l:[ 20, 200]},
{s:[ 1, 1, 20], l:[ 30,300 ]}
];
// Define the margin, radius, and color scale. The color scale will be
// assigned by index, but if you define your data using objects, you could pass
// in a named field from the data object instead, such as `d.name`. Colors
// are assigned lazily, so if you want deterministic behavior, define a domain
// for the color scale.
var m = 10,
r = 100,
z = d3.scale.category20c();
// Insert an svg:svg element (with margin) for each row in our dataset. A
// child svg:g element translates the origin to the pie center.
var svg = d3.select("body").selectAll("svg")
.data([datad])
.enter().append("svg:svg")
.attr("width", (r + m) * 2)
.attr("height", (r + m) * 2)
.append("svg:g")
.attr("transform", "translate(" + (r + m) + "," + (r + m) + ")");
var pie = d3.layout.pie() //this will create arc data for us given a list of values
.value(function(d, i) { return d.s[i]; }); //we must tell it out to access the value of each element in our data array
// The data for each svg:svg element is a row of numbers (an array). We pass
// that to d3.layout.pie to compute the angles for each arc. These start and end
// angles are passed to d3.svg.arc to draw arcs! Note that the arc radius is
// specified on the arc, not the layout.
svg.selectAll("path")
.data(pie)
.enter().append("svg:path")
.attr("d", d3.svg.arc()
.innerRadius(0)
.outerRadius(r + 2))
.style("fill", function(d, i) { return z(i); });
</script>
</body>
</html>
我得到了一个饼图，它由数据集中每个“s”数组的“20”值组成。
第一个饼图是从 datad[0][0] 绘制的，第二个饼图是从 datad[1][1] 绘制的，第三个饼图是从 datad[2][2] 绘制的。
我期待三个饼图（我的数据中的每个“s”数组一个）。
我认为我的问题在于：
var pie = d3.layout.pie() //this will create arc data for us given a list of values
.value(function(d, i) { return d.s[i]; }); //we must tell it out to access the value of each element in our data array
我如何告诉它迭代每个 s 数组，而不是同时迭代 datad 和 s 数组。也就是说，我想迭代 datad[0]s[0], datad[0]s[1], datad[0]s[2] ... datad[2]s[0], datad[2]s [1] (etc) 代替 datad[0]s[0], datad[1]s[1], datad[2]s[2]
提示或指针表示赞赏！
编辑：这是小提琴：jsfiddle.net/H2SKt/701/
这里有一些出错的地方加起来得到一个漂亮的饼图，这不是你要绘制的图表。
首先，当您将数据连接到您的 svg 选择时：
var svg = d3.select("body").selectAll("svg")
.data([datad])
您将数据数组嵌套在一个新数组（方括号）中，其中您的数据数组是唯一的元素。所以你只能<svg>从你的enter()陈述中得到一个，而不是三个。将其更改为
var svg = d3.select("body").selectAll("svg")
.data(datad)
你会得到三个<svg>元素，如你所愿。但是它们都没有饼图，因为您的饼图函数无法找到您告诉它要查找的数据值：
var pie = d3.layout.pie()
.value(function(d, i) { return d.s[i]; });
svg.selectAll("path")
.data(pie)
.enter().append("svg:path")
饼图函数期望传递一个数据数组，它将在数组的每个元素上调用指定的value函数。你告诉它数组的每个元素都有一个数组属性，它应该访问该数组中的一个元素。当你的 pie 函数被传递给你的整个原始数据数组时，这是工作（有点），但现在我们已经将原始数据数组拆分为不同的 SVG 元素。现在 pie 函数正在传递一个表单的数据对象，并且不知道如何处理它。s{s:[ 1, 1, 20], l:[ 30,300 ]}
所以你需要改变两件事：你需要确保 pie 函数只传递它应该使用的值数组，并且你需要告诉它如何从该数组的每个元素访问值。除非您实际上不必执行第二部分，因为这些值只是原始数字并且默认值函数将起作用：
var pie = d3.layout.pie()
// .value(function(d, i) { return d; }); //default, not required
svg.selectAll("path")
.data( function(d) { return pie(d.s); })
.enter().append("svg:path")
d数据连接函数中的值是附加到每个<svg>元素的数据对象；匿名函数提取子数组并对其调用 pie 函数，以返回该<path>SVG 中每个元素的数据数组。
工作小提琴：http : //jsfiddle.net/H2SKt/706/