Question

var barData = [10, 35, 8, 50, 25];

var chartWeight = 800,
    chartHeight = 400,
    barWidth = 50,
    barOffset = 5;

var myChart = d3.select('#chart')
    .append('svg')
    .attr({
        width: chartWeight,
        height: chartHeight
    })
    .style({
        background: '#C9D7D6'
    });

function draw(data) {

    var bars = myChart.selectAll('rect').data(data);

    bars.exit().remove();

    bars.enter().append('rect')
        .attr({
            x: function (d, i) {
                return (barWidth+barOffset)*i;
            },
            y: function (d) {
                return chartHeight-d;
            },
            width: barWidth,
            height: function (d) {
                return d;
            }
        })
        .style({
            fill: '#C61C6F'
        });

}

draw(barData);

setTimeout(function () {
    var newData = [30, 25, 55];
    draw(newData);
}, 2000);

http://plnkr.co/edit/gwsuorMUVHDtZzOZnp8Y?p=preview

我正在尝试使用新的值数组更新小节聊天。根据新数组更新了数字，但条形图的大小没有变化。谁能发现我的错误

Answer 1

您没有“更新”选择：

bars.attr({
        x: function (d, i) {
            return (barWidth+barOffset)*i;
        },
        y: function (d) {
            return chartHeight-d;
        },
        width: barWidth,
        height: function (d) {
            return d;
        }
    });

这是小提琴：https://jsfiddle.net/yqmdyw6k/

Answer 2

分隔一次配置并更新的rects。

var barData = [10, 35, 8, 50, 25];

var chartWeight = 800,
    chartHeight = 400,
    barWidth = 50,
    barOffset = 5;

var myChart = d3.select('#chart')
    .append('svg')
    .attr({
        width: chartWeight,
        height: chartHeight
    })
    .style({
        background: '#C9D7D6'
    });

function draw(data) {

    var bars = myChart.selectAll('rect').data(data);

    bars.enter().append('rect')
        .attr({
            x: function (d, i) {
                return (barWidth+barOffset)*i;
            },
            width: barWidth
        });

    // the height (y) is updated 
    bars.attr({y: function (d) {
            return chartHeight-d;
        },
        height: function (d) {
         return d;
        }})
        .style({
        　fill: '#C61C6F'
      　});

    bars.exit().remove();
}

draw(barData);

setTimeout(function () {
    var newData = [30, 25, 55];
    draw(newData);
}, 2000);

http://plnkr.co/edit/TbTjSFeBfSfyRTaZZlAQ?p=preview

D3.js更新吧聊天

2 个答案: