0

私はD3を初めて使用し、それがとても好きですが、単純な棒グラフを作成する最初の試みで、棒グラフの高さをSVG要素の全高に正規化したいところに行き詰まりました。したがって、最大のデータ値はSVG要素の全高にスケーリングする必要があります。他のすべては相対的にスケーリングする必要があります。これはばかげたエラーだと思いますが、見えません。助けてください！thnx！

これがコードです

  var dataset = [ 50, 43];
  var colorSet = ['rgb(143,172,206)', 'rgb(117,122,184)'];

  var w = 260;
  var h = 200;
  var barPadding = 7;



  var svg = d3.select("body")
              .append("svg")
              .attr("width", w)
              .attr("height", h);

  var x = d3.scale.ordinal()
      .domain(dataset)
      .rangeBands([0, w - (barPadding*dataset.length)]);

  var y = d3.scale.linear()
              .domain([0, 100]) //d3.max(dataset) // <- HERE SHOULD BE d3.max(dataset) CORRECT?
              .range([0,h]);

  svg.selectAll("rect")
     .data(dataset)
     .enter()
     .append("rect")
     .attr("x", function(d, i) {
        return i * (w / dataset.length);
      })
     .attr("y",  y)                             // <-- SHOULDN'T BE HERE h - y?
     .attr("width", x.rangeBand()) 
     .attr("height", y)
     .attr("fill", function(d, i) {
        return colorSet[i];
      });


svg.append("line")
  .attr("x1", 0)
  .attr("x2", w * dataset.length)
  .attr("y1", h - 0.5)
  .attr("y2", h - 0.5)
  .style("stroke", "#000");

およびJSBINへのリンク

4

1 に答える 1

2

yの位置と高さの両方に同じyの範囲を使用することはできません。

yの位置にはrange（[h、0]）が必要であり、高さにはrange（[0、h]）が必要です。

これを確認するには、データポイントが100％の場合、ayの位置を0にし、高さをコンテナの高さにします。データが0％の場合、y位置をコンテナの高さにし、高さを0にします。

于 2012-10-29T10:26:53.353 に答える