标识此 d3 堆积条形图示例中使用的函数

Question

我正在学习d3教程，并边走边学习d3和javascript。我的目标是理解和更改此 URL 中的堆叠条形图示例：

http://bl.ocks.org/3886208

在此图表的代码中，有这样一段话：

data.forEach(function(d) {
    var y0 = 0;
    d.ages = color.domain().map(function(name) **{ return {name: name, y0: y0, y1: y0 += +d[name]}; });**
    d.total = d.ages[d.ages.length - 1].y1;
  });

您能否告诉我在粗体行"{ 返回 {name： name， y0： y0

， y1： y0 += +d[name]}" 中正在执行什么样的过程或函数？ 我知道它定义了（名称）的处理方式，但代码非常简洁，以至于我无法找出搜索词来发现它在做什么。 我希望得到这样的回应："这是有人在 js 或 d3 中做 x 的一个例子，你需要去这里阅读更多关于它的信息。

Answer 1

用大括号括起来的事物是对象文字。 匿名函数function(name)为数组中由 color.domain() 返回的每个值返回一个对象文本。 map 是一个内置的 JavaScript 数组。

希望这足以让您搜索更多信息。 对象文字在javascript中被大量使用;你最好阅读一本体面的入门书（如Crockford的Javascript：The Good Parts），它将涵盖这一点，匿名函数，闭包等（这是d3等框架中经常使用的习语）。

Answer 2

我相信你指的是堆积条形图的 D3.js 示例

代码返回一个对象，该对象被初始化为包含 3 个不同的对象（name、y0 和 y1），在将值分配给y1后，它还将变量y0的值增加了 d[name] 个。我正在重写相同的代码，但语法不同，因此更容易理解。

var y0 = 0;
d.ages = color.domain().map(function(name) { return {name: name, y0: y0, y1: y0 += +d[name]}; });

可以翻译成：

var y0 = 0; // Initialize the temp var
d.ages = color.domain()
  .map(function(name) { 
    var myObj = { // Create and initialize the variable that will be returned
      name: name, 
      y0: y0, 
      y1: y0 + Number(d[name])
    };
  y0 += Number(d[name]); // Increase y0
  return myObj; // return the object and continue with the remaining values if there's a list
});

例如，如果您在输入数据中收到一个列表，其中包含一行[3, 5, 9]值，它将创建一个包含该行的 3 个其他对象的ages对象，如下所示：

  ages: [
    Object { name="youVariableName", y0=0, y1=3}
    Object { name="youVariableName", y0=3, y1=8}
    Object { name="youVariableName", y0=8, y1=17}
  ]

其余行以此类推，以及它们的对应值。