1

我试图了解 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 范围以及将矩形的“y”设置为（hd.yo）的明显解决方案。他们都没有工作，我真的很困惑我哪里出错了。对此的任何帮助将不胜感激。

4

1 回答 1

1

您可以将 的 y 值更改rects为

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

代替

return yScale(d.y0);

你在正确的轨道上h - yScale(d.y0)，但这样做意味着高度应该是-yScale(d.y)，因为我们翻转了整个酒吧。高度是负数，因为以前的顶部边缘现在是底部边缘，所以我们从错误的边缘计算它。我们需要减去高度才能到达另一条边，这样我们就可以再次获得正高度。

于 2014-08-08T05:18:49.813 回答