1

参考d3.js 上的这个堆栈图

有人可以解释这段 javascript 吗？我可能根本不了解 javascript 背后的基本原理，我对它比较陌生。我知道正在设置条形之间的边距，整个视图的宽度，高度，但是我完全迷失在下面的部分中。整个来源都在 mbostock 链接上...在此先感谢。

var margin = 20,
width = 960,
height = 500 - .5 - margin,
mx = m,
my = d3.max(data, function(d) {
  return d3.max(d, function(d) {
    return d.y0 + d.y;
  });
}),
mz = d3.max(data, function(d) {
  return d3.max(d, function(d) {
    return d.y;
  });
}),

x = function(d) { return d.x * width / mx; },
y0 = function(d) { return height - d.y0 * height / my; },
y1 = function(d) { return height - (d.y + d.y0) * height / my; },
y2 = function(d) { return d.y * height / mz; };
4

1 回答 1

2

虽然我对 javascript 也很陌生，但我会尝试提供我对代码的理解：

my计算堆叠时条形的最大高度（d.y0与底部的位置一样，并且d.y是条形的高度，因此d.y0 + d.y表示任何特定堆叠条形的高度）

同样，mz计算分组时条形的最大高度

d.x是条形的索引位置，width / mx是分配给任何条形组/堆栈的像素空间，因此该函数x将索引转换为像素空间

同样，y0和 y1是将堆叠条的高度转换为像素空间y2的函数， 是将分组条的高度转换为像素空间的函数

于 2012-06-27T00:17:20.427 回答