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

这里有两个问题：

给 .data (function (d) { return d.name; })) 的键函数告诉 d3 通过名称关联每个数据点。每次刷新时，都会传入 50 个具有不同随机名称的新数据对象，因此 D3 失去了关联。所以每次刷新时，所有的数据都会进入“exit()”数据连接，而新数据会进入“enter()”数据连接。如果我们不提供 key 功能，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 回答