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 に答える