2

我正在学习 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]}”中正在执行什么样的过程或功能？我知道它正在定义 (name) 的处理方式，但代码非常简洁，以至于我无法找出搜索词来发现它在做什么。我希望得到这样的回应：“这是某人在 js 或 d3 中执行 x 的示例，您需要去这里阅读更多相关信息。”

4

2 回答 2

3

大括号包围的东西是一个对象字面量。匿名函数 为返回的function(name)数组中的每个值返回一个对象字面量color.domain()。 map是一个内置的 javascript 数组。

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

于 2012-11-22T14:23:15.730 回答
3

我相信您指的是堆叠条形图的 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}
  ]

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

于 2014-09-04T22:27:08.403 回答