Question

我正在尝试让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]（等）代替datad [0] s [0]，datad [1] s [1]，datad [2] s [2]

提示或指示赞赏！

编辑：这里是小提琴：jsfiddle.net/H2SKt/701 /

Answer 1

这里出现了一些问题，这些都是为了获得一个不是你想要绘制的图表的漂亮饼图。

对于初学者，当您将数据加入到您的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函数阵列即可。您告诉它数组的每个元素都有一个s属性是一个数组，它应该从该数组中访问一个元素。当你的pie函数传递给你的整个原始数据数组时，这是有效的（但有点），但现在我们没有将原始数据数组拆分成不同的SVG元素。现在，pie函数正在传递{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函数，以返回该SVG中每个<path>元素的数据数组。

工作小提琴： http://jsfiddle.net/H2SKt/706/

D3.js - 我如何遍历数据集中的子数组

1 个答案: