2

另一个d3问题在这里......

我正在修改我完成构建的条形图，因为由于我对 each() 方法的不当使用，我有太多的组件和太多的冗余转换，以至于性能真的很糟糕……这有点违背了在第一名！

但无论如何，我一直在密切关注 mbostock 的堆叠条形图教程，但在尝试将我的条形相互填充时遇到了问题。

相关代码如下：

var barWidth = (2.7*chartWidth)/(3.7*array.length - 1);
    //font size for bar labels
    var barNumberSize = (16.0 / 27) * barWidth;
    //font size for bubbles
    var bubbleNumberSize = (12.0 / 27) * barWidth;
    var barPadding = barWidth / 2.7;
    var maxBarHeight = chartHeight;
    var bubbleRadius = barWidth / 2;

    // create the svg object for the whole graphic
    var svg = d3.select('body')
        .append('svg')
        .attr('class','graphic')
        .attr('width', svgWidth)
        .attr('height', svgHeight)

    //create the section for the bar chart itself
    var chart = svg.append("g")
        .attr('width', chartWidth)
        .attr('height', chartHeight)
        .attr('class', 'chart')
        //make room for axes, etc.
        .attr('transform', 'translate(' + chartPaddingX + ',' + (chartHeight - chartPaddingY) + ')');

var x = d3.scale.ordinal()
        .rangeRoundBands([0,chartWidth],10),
    y = d3.scale.linear()
        .range([0, maxBarHeight]),
    z = d3.scale.ordinal().range(['rgb(41,41,41)','rgb(238,77,77)'])
    parse = d3.time.format("%m/%y").parse,
    format = d3.time.format("%b");

var results = d3.layout.stack()(["without","with"].map(function(result) {
    return array.map(function(d) {
        return {x:parse(d.date) , y:d[result]};
    });
}));

x.domain(results[0].map(function(d) { return d.x; }));
y.domain([0, d3.max(results[results.length - 1], function(d) { return d.y0 + d.y; })]);

var result = chart.selectAll("g.result")
    .data(results)
    .enter().append("svg:g")
    .attr("class", "result")
    .style("fill", function(d, i) { return z(i); })
    .style("stroke", function(d, i) { return z(i) });

var rect = result.selectAll("rect")
    .data(Object)
    .enter().append("svg:rect")
    .attr("x", function(d) { return x(d.x); })
    .attr("y", function(d) { return - y(d.y0) - y(d.y); })
    .attr("height", function(d) { return y(d.y); })
    .attr("width", x.rangeBand());

我的问题是这条线

var x = d3.scale.ordinal()
       .rangeRoundBands([0,chartWidth]),

工作正常，而这条线（将条形的填充设置为 10px）

var x = d3.scale.ordinal()
       .rangeRoundBands([0,chartWidth],10),

导致我所有的酒吧消失。对萤火虫的检查表明，当我设置填充值时，所有条形的宽度以某种方式变为 -180 像素（而不是 30 像素）。

我似乎无法弄清楚这个错误的根源......任何帮助将不胜感激！

4

1 回答 1

9

工作示例：http ://tributary.io/inlet/5816972

问题是填充值必须在 [0,1] 范围内。这个数字对应于分配给每个条的空间比例，这些空间将被填充替换。来源：https ://github.com/mbostock/d3/wiki/Ordinal-Scales#wiki-ordinal_rangeBands

于 2013-06-19T19:06:40.177 回答