5、D3.js 数据处理与可视化实战

D3.js 数据处理与可视化实战

1. 数据退出处理与动态更新

在 D3.js 中，数据退出（Exit）部分的处理相对简单。以下代码展示了如何移除不再与数据关联的视觉元素：

d3.select("body").selectAll("div.h-bar")
    .data(data)
    .exit() // <- J
    .remove();

exit() 函数用于计算所有不再与任何数据关联的视觉元素的集合差异。随后， remove() 函数会移除 exit() 函数选择的所有元素。只要在更改数据后调用 render() 函数，就能确保视觉表示与数据保持同步。

为了实现动态更新，可使用 setInterval 函数：

setInterval(function () { // <- K
    data.shift();
    data.push(Math.round(Math.random() * 100));
    render(data);
}, 1500);

每 1.5 秒，该函数会移除数据数组的第一个元素，并添加一个随机整数。更新数据数组后，再次调用 render() 函数以更新可视化效果，从而实现动画条形图的效果。