Question

参考此stack chart on 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; };

Answer 1

虽然我也是javascript的新手，但我会尝试提供我对代码的理解：

my计算堆叠时条形的最大高度（d.y0是基座的位置，d.y是条形的高度，因此d.y0 + d.y代表任何特定堆积条的高度）

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

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

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

d3.js堆栈图表

1 个答案: