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）。

我似乎无法弄清楚这个bug来自哪里......任何帮助都会非常感激！

Answer 1

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

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

d3 rangeRoundBands Padding

1 个答案: