d3.js条形图上的反向条形图

我刚刚开始使用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; });

SVG中的（0,0）坐标位于左上角，因此y坐标是“反转”的，即从顶部开始计算。这意味着您必须对条形图进行定位，使其从要显示的y位置开始并延伸到轴。您的代码应该是这样的

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

---

一般来说，您不需要将

矩形属性

保存在变量中——它与D3中的

矩形

完全相同，y坐标上的0位于顶部而不是底部。您需要首先将这些条向下移动到您希望y轴原点所在的位置，然后将这些条向上移动其高度以正确定位它们

下面是一个粗略的解决方案，希望您能够使用它（请参阅注释了解已更改的位）：

---

嘿，你能查一下我最近的问题吗？我遇到了类似的情况，但无法解决。

y

是原始问题中提供的函数（但未提供源代码）。这是一个基于基准的高度给出位置的函数。最简单的实现是

函数y（height）{returnheight；}

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