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

すべてのバーが消えます。firebug を使用した検査では、パディングの値を設定すると、どういうわけか、すべてのバーの幅が (30px ではなく) -180px に変更されることがわかりました。

このバグがどこから生じているのかわかりません...どんな助けでも大歓迎です!

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 に答える