javascript - 堆栈栏的方向和适当的大小

Question

因为我是使用 D3 进行 JavaScript 编程的新手。到目前为止，我已经成功地改变了这个graph在 X 轴上，但问题是如何调整 x 轴上的堆栈栏而不是在以下代码中将其颠倒:

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

console.log(dataset);
svg = d3.select('body')
        .append('svg')
        .attr('width', width )
        .attr('height', height)
        .append('g')


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


months = dataset[0].map(function (d) {
        return d.x;
    });
xScale = d3.scale.ordinal()
        .domain(months)
        .rangeRoundBands([0, width], .1);

xAxis = d3.svg.axis()
        .scale(xScale)
        .orient('bottom');


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('y', function (d,i) {
        return yScale(d.y0);
    })
        .attr('x', function (d) {
        return xScale(d.x);
    })
        .attr('height', function (d) {
        return xScale(d.x);
    })
        .attr('width', function (d) {
        return xScale.rangeBand();
    });


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

不要忘记我使用了 this 相同的数据。

Answer 1

以下代码将输出我上面请求的行。

var xScale = d3.scale.linear()
    .domain([d3.min(Germany, function (d) {
        return d[0]
    }),d3.max(Germany, function (d) {
        return d[0]
    })])
    .range([padding, w-padding]);
//var yScale = d3.scale.linear()
//  .domain([d3.min(newdict1, function (d) {return d[1];}),d3.max(newdict1, function(d) { return d[1];})])
//  .range([h - padding, padding]);

var yScale = d3.scale.linear()
    .domain([d3.min(latestdict, function (d) {
        return d[1]
    }), d3.max(latestdict, function (d) {
        return d[1]
    })])
    .range([h-padding, padding]);


var xAxis = d3.svg.axis()
    .scale(xScale)
    .orient("Bottom")
    .ticks(10);


var line = d3.svg.line()
    .x(function(d) { return xScale(d[0]); })
    .y(function(d) { return yScale(d[1]); })
    .interpolate("basis");