d3.js - d3 rangeRoundBands 填充

Question

这里还有一个 d3 问题...

我正在修改我完成构建的条形图，因为由于我对 each() 方法的不当使用，我有太多的组件和太多的冗余转换，性能真的很糟糕......这有点违背了使用的目的首先是它!

但无论如何，我一直在密切关注mbostock的stacked bar graph tutorial ，但遇到了一个问题，试图将我的栏杆彼此分开。

相关代码如下:

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

导致我所有的酒吧消失。使用 firebug 进行的检查显示，当我设置填充值时，所有条形的宽度都以某种方式更改为 -180px(而不是 30px)。

我似乎无法弄清楚这个错误是从哪里产生的...任何帮助将不胜感激!

Answer 1

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

问题是填充值需要在 [0,1] 范围内。该数字对应于分配给将被填充替换的每个条形的空间部分。来源:https://github.com/mbostock/d3/wiki/Ordinal-Scales#wiki-ordinal_rangeBands