Question

我玩简单的D3.js图表。之前我通过删除SVG组并创建新图表来更新它。我想更改它以在新数据到来之后更新路径而不删除svg。但是，它没有更新它，我不知道我做错了什么。 FIDDLE

JS

var update_counter = 0;
function drawChart() {
    var pie_d = 185,
        r = pie_d / 2,
        pieData = [1, Math.random() * 10],
        pie = d3.layout.pie(),
        arc = d3.svg.arc().innerRadius(60).outerRadius(r);

    update_counter++;
    if (!document.querySelectorAll('.svg svg').length) {
        d3.select('.svg').append('svg:svg')
            .data([pieData])
            .attr('width', pie_d)
            .attr('height', pie_d);
    } else {
        d3.select('.svg svg')
            .data([pieData]);
    }
    var arcs = d3.select('.svg svg').selectAll('g')
        .data(pie)
        .enter().append('svg:g')
        .attr('transform', 'translate(' + r + ',' + r + ')');

    arcs.append('svg:path')
        .attr('d', arc)
        .attr('class', function (d, i) {
            return i === 0 ? 'onl' : 'ter'
        });
    d3.select('.counter').text(update_counter);
}
drawChart();
setInterval(function () {
    drawChart()
}, 5000);

UDPATE

几乎在那里，但有时动画'跳'FIDDLE

使用动画更新简单D3.js圆环图中的数据

0 个答案: