1

現在、d3.js を使用してこの (mbostock.github.com/d3/ex/stack.html) 垂直積み上げ棒グラフを水平積み上げ棒グラフに変換しようとしていますが、うまくいきませんでした。誰かが d3.js の水平積み上げ棒グラフの例を持っているか、次のコードを正しく変更する方法を知っているか、正しい方向に私を向ける方法を知っていれば、非常に役立ちます。

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; }; // or `my` to not rescale

var vis = d3.select("#chart")
.append("svg")
.attr("width", width)
.attr("height", height + margin);

var layers = vis.selectAll("g.layer")
.data(data)
.enter().append("g")
.style("fill", function(d, i) { return color(i / (n - 1)); })
.attr("class", "layer");

var bars = layers.selectAll("g.bar")
.data(function(d) { return d; })
.enter().append("g")
.attr("class", "bar")
.attr("transform", function(d) { return "translate(" + x(d) + ",0)"; });

 bars.append("rect")
.attr("width", x({x: .9}))
.attr("x", 0)
.attr("y", height)
.attr("height", 0)
 .transition()
.delay(function(d, i) { return i * 10; })
.attr("y", y1)
.attr("height", function(d) { return y0(d) - y1(d); });
4

2 に答える 2

-1

Frank Guerino の例を試してみ て ください。 ) 水平方向のコードをクリミアの例または複数の D3 トップダウンの例と組み合わせると、軌道に乗るはずです。主に探す必要があるのは、水平セットアップで座標を正しく計算する方法です。残りは、他のスタックの例と同じです。よろしくお願いします！

于 2012-05-13T10:42:12.830 に答える