0

作成した棒グラフの幅を変更しようとしています。問題は、移行中にバーが 0 から n に成長することです。バーを幅の新しい値に拡大または縮小するにはどうすればよいですか? これが私のjsfiddleです... http://jsfiddle.net/LAG2r/2/

var codes = d3.range("A".charCodeAt(0), "Z".charCodeAt(0)).concat(d3.range("a".charCodeAt(0), "z".charCodeAt(0))),
    chars = [];

codes.forEach(function (c) {
    var chr = String.fromCharCode(c);
    chars.push(chr);
});

function random(size) {

    var string = '',
        len = chars.length,
        start = Math.floor(Math.random() * len);

    return d3.shuffle(chars.slice(start, start + size)).join('');
}

function createData(size) {
    var data = [];
    for (var i = 0; i < size; i++) {
        data.push({
            name: random(6),
            value: Math.random() * 1000
        });
    }
    return data;
}
var svg = d3.select('#yo').append('svg:svg').append('g:svg');



var x = d3.scale.linear()
    .domain([0, 1000])
    .range([0, 490])
    .nice();

var y = d3.scale.ordinal()
    .domain(d3.range(50))
    .rangeRoundBands([0, 490], .2);

setInterval(function () {

    var dataTarget = svg.selectAll(".bar")
        .data(createData(50), function (d) {
        return d.name;
    });
    dataTarget.exit().remove();
    dataTarget.enter().append("rect")
        .attr("class", "bar")
        .attr("height", y.rangeBand())

        .attr("y", function (d, i) {
        return y(i);
    })
        .attr("x", function (d, i) {
        return x(Math.min(0, d.value));
    })
        .transition()
        .attr("width", function (d, i) {
        return d.value;
    });

}, 2000);
4

1 に答える 1

1

ここに 2 つの問題があります。

.data (function (d) { return d.name; })) に指定されたキー関数は、d3 に各データ ポイントをその名前で関連付けるように指示します。更新するたびに、ランダムな名前が異なる 50 個の新しいデータ オブジェクトが渡されるため、D3 は関連付けを失います。したがって、更新するたびに、そこにあったすべてのデータが「exit()」データ結合に入り、新しいデータが「enter()」データ結合に入ります。キー関数を提供しない場合、d3 は index をベースにします。これは、ここで必要なものに近いと思います。

第二に、「更新」データ結合はありません。遷移のある入力のみです。これを一番下に追加する必要があります:

dataTarget
.transition()
.duration(1000)
.attr("width", function (d, i) {
    return d.value;
});

私はあなたの目標であると思うものでここでjsfiddleを改訂しました: http://jsfiddle.net/LAG2r/3/

ソース: http://bost.ocks.org/mike/join/

于 2013-03-27T17:28:46.187 に答える