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;
  });

您能告诉我在粗体行“{return {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这样的框架中经常使用的习语）。 / p>

Answer 2

我相信你指的是Stacked Bar Chart

的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]的一行的列表，则会创建一个ages个对象，其中包含该行的3个其他对象，如：

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

等等剩下的行，带有相应的值。

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

2 个答案: