D3转换不运行

D3 transition does not run

本文关键字：运行 转换 D3      更新时间：2023-09-26

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

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();
}
在选择了rect元素之后，你可以看到

，然后添加一个过渡

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

    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秒。可惜没有过渡，只有跳切。

我做错了什么?

i have fiddle: fiddle

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

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