0

私は D3.js を使い始めたばかりで、バーを水平に並べるのに問題があります。現在、それらは下向きに出ています。

var jsonRectangles = [
  { "x_axis": 10,  "y_axis": 0, "height": 65,  "width":20, "color": "green" },
  { "x_axis": 40,  "y_axis": 0, "height": 80,  "width":20, "color": "purple" },
  { "x_axis": 70,  "y_axis": 0, "height": 100, "width":20, "color": "orange" },
  { "x_axis": 100, "y_axis": 0, "height": 50,  "width":20, "color": "brown" },
  { "x_axis": 130, "y_axis": 0, "height": 66,  "width":20, "color": "black" },
  { "x_axis": 160, "y_axis": 0, "height": 68,  "width":20, "color": "red" }];

var svgContainer = d3.select("body")
        .append("svg")
        .attr("width", 500)
        .attr("height", 100);

var rectangles = svgContainer.selectAll("rect")
        .data(jsonRectangles)
       .enter()
        .append("rect");

var rectangleAttributes = rectangles
        .attr("x", function (d) { return d.x_axis; })
        .attr("y", function (d) { return d.y_axis; })
        .attr("height", function(d) { return height - y(d.weight); })
        .attr("width", function (d) { return d.width; })
        .style("fill", function(d) { return d.color; });
4

2 に答える 2

2

SVG の (0,0) 座標は左上隅にあるため、y 座標は上からカウントされるという意味で「逆」になります。これは、表示したい y 位置から開始して軸まで伸びるようにバーを配置する必要があることを意味します。コードは次のようになります。

rectangles.attr("y", function (d) { return (heightOfGraph - y(d.height)); })
          .attr("height", function(d) { return y(d.height); });

一般的な注意として、変数に保存する必要はありませんrectangleAttributes- とまったく同じrectanglesです。

于 2013-04-17T09:29:13.487 に答える