d3.js條形圖中的反向條紋

Question

我剛剛開始使用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; }); 

Answer 1

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。

Answer 2

在D3中，y座標上的0位於頂部而不是底部。您需要將杆向下移動到您想要的y軸原點位置，然後將杆向上移動其高度以正確定位它們。

這裏雖然是一個粗略的解決方案希望，你就可以用（見已經改變了位評論）工作：

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" }]; 

// height of the visualisation - used to translate the bars 
var viz_height = 100; 

var svgContainer = d3.select("body").append("svg") 
            .attr("width", 500) 
            // set using viz_height rather than a fixed number 
            .attr("height", viz_height); 

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

var rectangleAttributes = rectangles 
          .attr("x", function (d) { return d.x_axis; }) 
          // move the bars to the bottom of the chart (using 
          // viz_height), then move them back up by the height of 
          // the bar which moves them into palce 
          .attr("y", function (d) { return viz_height - y(d.height); }) 
          .attr("height", function(d) { return y(d.height); }) 
          .attr("width", function (d) { return d.width; }) 
          .style("fill", function(d) { return d.color; });