Question

我试图了解d3布局，并制作了一个只有一个堆叠的简单堆叠条形图。我目前的代码如下：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <script type="text/javascript" src="d3/d3.js"></script>
        <style type="text/css">
        </style>
    </head>
    <body>
        <script type="text/javascript">

            var w = 500;
            var h = 300;


            var dataset = [
                [
                    { x: 0, y: 5 }
                    /*{ x: 1, y: 4 },
                    { x: 2, y: 2 },
                    { x: 3, y: 7 },
                    { x: 4, y: 23 }*/
                ],
                [
                    { x: 0, y: 10 }
                /*  { x: 1, y: 12 },
                    { x: 2, y: 19 },
                    { x: 3, y: 23 },
                    { x: 4, y: 17 }*/
                ],
                [
                    { x: 0, y: 22 }
                    /*{ x: 1, y: 28 },
                    { x: 2, y: 32 },
                    { x: 3, y: 35 },
                    { x: 4, y: 43 }*/
                ]
            ];

            var stack = d3.layout.stack();

            stack(dataset);

            //Setting up scales
            var xScale = d3.scale.ordinal()
                .domain(d3.range(dataset[0].length))
                .rangeRoundBands([0, w], 0.05);

            var yScale = d3.scale.linear()
                .domain([0,             
                    d3.max(dataset, function(d) {
                        return d3.max(d, function(d) {
                            return d.y0 + d.y;
                        });
                    })
                ])
                .range([0,h]);

            var colors = d3.scale.category10();

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

            // Adding a group for each row of data
            var groups = svg.selectAll("g")
                .data(dataset)
                .enter()
                .append("g")
                .style("fill", function(d, i) {
                    return colors(i);
                });

            // Adding a rect for each data value
            var rects = groups.selectAll("rect")
                .data(function(d) { return d; })
                .enter()
                .append("rect")
                .attr("x", function(d, i) {
                    return xScale(i);
                })
                .attr("y", function(d) {
                    return yScale(d.y0);
                })
                .attr("height", function(d) {
                    return yScale(d.y);
                })
                .attr("width", xScale.rangeBand());

        </script>
    </body>
</html>

这导致条形向下（我明白这是因为SVG如何定位，即左上角的0,0。）我只是想反转我的图表并让条形图上升。我尝试颠倒yScale范围，也是设置＆＃34; y＆＃34;的明显解决方案。直到（h-d.yo）。他们都没有工作，我真的很困惑我在哪里出错了。任何帮助都将不胜感激。

Answer 1

您可以将rects的y值更改为

return h - yScale(d.y0) - yScale(d.y);

而不是

return yScale(d.y0);

你使用h - yScale(d.y0)走在正确的轨道上，但这样做意味着身高应该是-yScale(d.y)，因为我们翻了整个栏。高度为负，因为过去的上边缘现在是下边缘，所以我们从错误的边缘开始计算它。我们需要减去高度以使我们到达另一边，这样我们才能再次获得正高度。

反转d3.js中的堆积条形图

1 个答案: