1

我目前正在尝试使用 d3.js 将这个（mbostock.github.com/d3/ex/stack.html）垂直堆叠条形图转换为水平堆叠条形图，但我没有运气。如果有人有来自 d3.js 的水平堆叠条形图的示例，或者知道如何正确修改以下代码或将我指向正确的方向，那将是一个很大的帮助。

var margin = 20,
 width = 960,
 height = 500 - .5 - margin,
 mx = m,
 my = d3.max(data, function(d) {
   return d3.max(d, function(d) {
     return d.y0 + d.y;
   });
 }),
 mz = d3.max(data, function(d) {
   return d3.max(d, function(d) {
     return d.y;
  });
 }),
 x = function(d) { return d.x * width / mx; },
 y0 = function(d) { return height - d.y0 * height / my; },
 y1 = function(d) { return height - (d.y + d.y0) * height / my; },
 y2 = function(d) { return d.y * height / mz; }; // or `my` to not rescale

var vis = d3.select("#chart")
.append("svg")
.attr("width", width)
.attr("height", height + margin);

var layers = vis.selectAll("g.layer")
.data(data)
.enter().append("g")
.style("fill", function(d, i) { return color(i / (n - 1)); })
.attr("class", "layer");

var bars = layers.selectAll("g.bar")
.data(function(d) { return d; })
.enter().append("g")
.attr("class", "bar")
.attr("transform", function(d) { return "translate(" + x(d) + ",0)"; });

 bars.append("rect")
.attr("width", x({x: .9}))
.attr("x", 0)
.attr("y", height)
.attr("height", 0)
 .transition()
.delay(function(d, i) { return i * 10; })
.attr("y", y1)
.attr("height", function(d) { return y0(d) - y1(d); });
4

2 回答 2

1

诀窍是：将其视为几乎与垂直堆叠条形图相同，但在堆叠之前反转 x 和 y 值，然后在堆叠后再次返回。请注意下面代码中的注释。

我的博客文章：http ://datashaman.github.io/2014/01/26/horizo​​ntal-stacked-bar-chart-d3/

下面的代码演示：http: //bl.ocks.org/datashaman/8621955

jsFiddle：http: //jsfiddle.net/datashaman/rBfy5/2/

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <style>
        .bar {
        }
        .axis path,
        .axis line {
            fill: none;
            stroke: black;
            shape-rendering: crispEdges;
        }
        .axis text {
            font-family: sans-serif;
            font-size: 11px;
        }

        #tooltip {
            position: absolute;
            text-align: center;
            width: 40px;
            height: auto;
            padding: 10px;
            background-color: white;
            -webkit-border-radius: 10px;
            -moz-border-radius: 10px;
            border-radius: 10px;
            -webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
            -moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
            box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
            pointer-events: none;
        }

        #tooltip.hidden {
            display: none;
        }

        #tooltip p {
            margin: 0;
            font-family: sans-serif;
            font-size: 16px;
            line-height: 20px;
        }
        </style>
    </head>
    <body>
        <script src="http://d3js.org/d3.v3.min.js"></script>

        <div id="tooltip" class="hidden">
            <p><span id="value">100</span></p>
        </div>

        <script>
        var margins = {
                top: 12,
                left: 48,
                right: 24,
                bottom: 24
            },
            legendPanel = {
                width: 240
            },
            width = 700 - margins.left - margins.right - legendPanel.width,
            height = 100 - margins.top - margins.bottom,
            dataset = [
                {
                    data: [
                        { month: 'Aug', count: 123 },
                        { month: 'Sep', count: 234 },
                        { month: 'Oct', count: 345 }
                    ],
                    name: 'Series #1'
                },
                {
                    data: [
                        { month: 'Aug', count: 235 },
                        { month: 'Sep', count: 267 },
                        { month: 'Oct', count: 573 }
                    ],
                    name: 'Series #2'
                }

            ],
            series = dataset.map(function(d) { return d.name; }),
            dataset = dataset.map(function(d) {
                return d.data.map(function(o, i) {
                    // Structure it so that your numeric
                    // axis (the stacked amount) is y
                    return {
                        y: o.count,
                        x: o.month
                    };
                });
            }),
            stack = d3.layout.stack();

        stack(dataset);

        var dataset = dataset.map(function(group) {
            return group.map(function(d) {
                // Invert the x and y values, and y0 becomes x0
                return {
                    x: d.y,
                    y: d.x,
                    x0: d.y0
                };
            });
        }),
        svg = d3.select('body')
            .append('svg')
                .attr('width', width + margins.left + margins.right + legendPanel.width)
                .attr('height', height + margins.top + margins.bottom)
            .append('g')
                .attr('transform', 'translate(' + margins.left + ',' + margins.top + ')'),
        xMax = d3.max(dataset, function(group) {
            return d3.max(group, function(d) {
                return d.x + d.x0;
            });
        }),
        xScale = d3.scale.linear()
            .domain([0, xMax])
            .range([0, width]),
        months = dataset[0].map(function(d) { return d.y; }),
        _ = console.log(months),
        yScale = d3.scale.ordinal()
            .domain(months)
            .rangeRoundBands([0, height], .1),
        xAxis = d3.svg.axis()
            .scale(xScale)
            .orient('bottom'),
        yAxis = d3.svg.axis()
            .scale(yScale)
            .orient('left'),
        colours = d3.scale.category10(),
        groups = svg.selectAll('g')
            .data(dataset)
            .enter()
            .append('g')
                .style('fill', function(d, i) {
                    return colours(i);
                }),
        rects = groups.selectAll('rect')
            .data(function(d) { return d; })
            .enter()
                .append('rect')
                    .attr('x', function(d) { return xScale(d.x0); })
                    .attr('y', function(d, i) { return yScale(d.y); })
                    .attr('height', function(d) { return yScale.rangeBand(); })
                    .attr('width', function(d) { return xScale(d.x); })
                    .on('mouseover', function(d) {
                        var xPos = parseFloat(d3.select(this).attr('x')) / 2 + width / 2;
                        var yPos = parseFloat(d3.select(this).attr('y')) + yScale.rangeBand() / 2;

                        d3.select('#tooltip')
                            .style('left', xPos + 'px')
                            .style('top', yPos + 'px')
                            .select('#value')
                            .text(d.x);

                        d3.select('#tooltip').classed('hidden', false);
                    })
                    .on('mouseout', function() {
                        d3.select('#tooltip').classed('hidden', true);
                    })

        svg.append('g')
            .attr('class', 'axis')
            .attr('transform', 'translate(0,' + height + ')')
            .call(xAxis);

        svg.append('g')
            .attr('class', 'axis')
            .call(yAxis);

        svg.append('rect')
            .attr('fill', 'yellow')
            .attr('width', 160)
            .attr('height', 30 * dataset.length)
            .attr('x', width + margins.left)
            .attr('y', 0);

        series.forEach(function(s, i) {
            svg.append('text')
                .attr('fill', 'black')
                .attr('x', width + margins.left + 8)
                .attr('y', i * 24 + 24)
                .text(s);
            svg.append('rect')
                .attr('fill', colours(i))
                .attr('width', 60)
                .attr('height', 20)
                .attr('x', width + margins.left + 90)
                .attr('y', i * 24 + 6);
        });
    </script>
</body>
</html>
于 2014-01-26T20:00:31.357 回答
-1

试试 Frank Guerino 的示例： http ://bl.ocks.org/2141479 - 水平条形图和 http://bl.ocks.org/2354192 - 多个 D3 自上而下和自下而上堆叠条形图（没有 d3.layout.stack ) 将水平代码与克里米亚示例或多个 D3 自上而下示例结合起来，您应该会走上正轨。您主要需要寻找的是如何在水平设置中计算坐标。其余的与任何其他堆栈示例相同。此致！

于 2012-05-13T10:42:12.830 回答