Question

我在一个程序中有一个简单的堆积条形图，但我真的不知道如何将它缩放到合适的大小，因为现在这些值大约为1并且非常薄。这是它的样子：

===

这就是我想要的样子：

5|
4| ZZZZ
3| YYYY
2| XXXX
1| XXXX
 |-------

以下是相关代码：

        //Bar Graph
        var canvas = d3.select("#canvas").append("svg").attr({
            width: 400,
            height: 400
        })

        var values = [xtwo, xone, xzero]

        var colours = ['#FA0', '#0AF', '#AF0']

        var data = []

        var yOffset = 0

        //Process the data

        for (var i = 0; i < values.length; i++) {

            var datum = {

                value: values[i],
                colour: colours[i],
                x: 0,
                y: yOffset

            }

            yOffset += values[i]

            data.push(datum)

        }

        yRange2 = d3.scale.linear().range([canvas.height - MARGINS.top, MARGINS.bottom]).domain([0, 5]),

            //setup y
            yAxis = d3.svg.axis()
            .scale(yRange2)
            .tickSize(5)
            .orient("left")
            .tickSubdivide(true);

        var bars = canvas.selectAll('rect').data(data)

        bars
            .enter()
            .append('rect')
            .attr({
                width: 30,
                height: function(d) {
                    return d.value
                },
                y: function(d) {
                    return d.y
                }
            })
            .style({
                fill: function(d) {
                    return d.colour
                }
            })

这里是完整的代码： jsfiddle.net/tqj5maza/6 /

Answer 1

问题实际上是基于：

var canvas = d3.select("#canvas").append("svg").attr({
            width: 400,
            height: 400
        })

因为我试图将svg附加到svg，但是

canvas.width = 500;
canvas.height = 500;

修好了。

缩放D3中的堆积条形图？

1 个答案: