0

理由はわかりませんが、私のコードは...ここにあるD3棒グラフ.jsチュートリアルに非常に密接に準拠しています：http：//mbostock.github.com/d3/tutorial/bar-1.html

変数「dataset」から同じ値を持つデータの長方形を描画しません。誰かが理由を説明できますか？またはそれを修正する方法は？

var dataset = [5, 2, 1, 1, 1, 50] ;

var w = setWidthToWindow();  //setWidthToWindow
var h = setHeightToWindow();  //setHeightToWindow
var x = d3.scale.linear()
      .domain([0, d3.max(dataset)])
      .range([0, w/2]);

var y = d3.scale.ordinal()
      .domain(dataset)
      .rangeBands([0, 120]);



var chart = d3.select("#over_rating")
          .append("svg")
          .attr("class", "chart")
          .attr("width", w)
          .attr("height", 20 * dataset.length);


chart.selectAll("rect")
     .data(dataset)
    .enter().append("rect")
     .attr("y", y)
     .attr("width", x )
     .attr("height", y.rangeBand());




chart.selectAll("text")
     .data(dataset)
    .enter().append("text")
     .attr("x", w/2 + 15)
     .attr("y", function(d) { return y(d) + y.rangeBand() / 2; })
     .attr("dx", 3) // padding-right
     .attr("dy", ".35em") // vertical-align: middle
     .attr("text-anchor", "end") // text-align: right
     .text(String);
4

1 に答える 1

2

順序スケールを使用しており、インデックスではなくデータ値に基づいてバーを配置しているため、値が「1」のすべてのデータはまったく同じ位置にスケーリングされます。svgを見ると、まったく同じ場所に3本のバーが描かれていることがわかります。

インデックス値を使用してスケールを設定できると思います。

var y = d3.scale.ordinal()
      .domain(d3.range(dataset.length))
      .rangeBands([0, 120]);

次に、インデックスでスケーリングします。

 .attr("y", function(d,i) { return y(i); })

これにより、データを追加し、それに対応するようにバーの幅を調整できます。

http://jsfiddle.net/findango/nfdST/

于 2013-03-01T01:12:31.257 に答える