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; });

enter image description here

在d3.js条形图上反转条形

2 个答案: