javascript - D3 转换不运行

Question

好的，我有以下代码(不用担心我会将其分成几部分):

var data = [{value: 1, label: 'Olaf'}, {value: 2, label: 'Marc'}, {value: 5, label: 'Stine'}, {
    value: 1,
    label: 'MC'
}, {value: 3, label: 'Louise'}, {value: 2, label: 'Jens'}];
var outerWidth = 500;
var outerHeight = 250;
var margin = { left: 130, top: 0, right: 0, bottom: 30 };
var barPadding = 0.2;

var xColumn = "value";
var yColumn = "label";

var innerWidth  = outerWidth  - margin.left - margin.right;
var innerHeight = outerHeight - margin.top  - margin.bottom;

var svg = d3.select("#chartArea").append("svg")
    .attr("width",  outerWidth)
    .attr("height", outerHeight);


var g = svg.append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var xAxisG = g.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + innerHeight + ")");
var yAxisG = g.append("g")
    .attr("class", "y axis");

var xScale = d3.scale.linear().range(      [0, innerWidth]);
var yScale = d3.scale.ordinal().rangeBands([0, innerHeight], barPadding);

var xAxis = d3.svg.axis().scale(xScale).orient("bottom")
    .ticks(d3.max(data, function (d){ return d[xColumn]; }))                   // Use approximately 5 ticks marks.
    .tickFormat(d3.format("s")) // Use intelligent abbreviations, e.g. 5M for 5 Million
    .outerTickSize(0);          // Turn off the marks at the end of the axis.
var yAxis = d3.svg.axis().scale(yScale).orient("left")
    .outerTickSize(1);          // Turn off the marks at the end of the axis.

function render(data){
    xScale.domain([0, d3.max(data, function (d){ return d[xColumn]; })]);
    yScale.domain(data.map( function (d){ return d[yColumn]; }));

    xAxisG.call(xAxis);
    yAxisG.call(yAxis);

    var bars = g.selectAll("rect").data(data);
    bars.enter().append("rect")
        .attr("height", yScale.rangeBand())
        .attr('class', 'vertical_bar');
    bars.transition();
    bars
        .attr("x", 0)
        .attr("y",     function (d){ return yScale(d[yColumn]); })
        .attr("width", function (d){ return xScale(d[xColumn]); });
    bars.exit().remove();
}

render(data);

setTimeout(function () {
    var data = [{value: 4, label: 'Olaf'}, {value: 22, label: 'Marc'}, {value: 15, label: 'Stine'}, {
        value: 13,
        label: 'MC'
    }, {value: 20, label: 'Louise'}, {value: 32, label: 'Jens'}];
    render(data);
},5000);

现在在这段代码中我有一个渲染函数:

   function render(data){
    xScale.domain([0, d3.max(data, function (d){ return d[xColumn]; })]);
    yScale.domain(data.map( function (d){ return d[yColumn]; }));

    xAxisG.call(xAxis);
    yAxisG.call(yAxis);

    var bars = g.selectAll("rect").data(data);
    bars.enter().append("rect")
        .attr("height", yScale.rangeBand())
        .attr('class', 'vertical_bar')
        .on('mouseover', tip.show)
        .on('mouseout', tip.hide);
    bars.transition();
    bars
        .attr("x", 0)
        .attr("y",     function (d){ return yScale(d[yColumn]); })
        .attr("width", function (d){ return xScale(d[xColumn]); });
    bars.exit().remove();
}

如您所见，在选择矩形元素后，我添加了一个过渡

然后在我的代码末尾我有以下内容:

    render(data);

setTimeout(function () {
    var data = [{value: 4, label: 'Olaf'}, {value: 22, label: 'Marc'}, {value: 15, label: 'Stine'}, {
        value: 13,
        label: 'MC'
    }, {value: 20, label: 'Louise'}, {value: 32, label: 'Jens'}];
    render(data);
},5000);

这将首先插入数据，然后在插入一些新数据后 5 秒，这将导致转换。遗憾的是没有过渡，只有跳切。

那么我做错了什么？

我有 fiddle :fiddle

Answer 1

您不需要将调用链接到 transition() 吗？

bars
    .transition()
    .attr("x", 0)
    .attr("y",     function (d){ return yScale(d[yColumn]); })
    .attr("width", function (d){ return xScale(d[xColumn]); });