”D3 4.x数据可视化实战“——数据绑定

1、将数组绑定为数据

let data = [10, 50, 15, 23];
function render(data) {
  let bars = d3.select('body').
    selectAll('div.h-bar')
    .data(data);
  bars.enter()
    .append('div')
    .attr('class', 'h-bar')
    .merge(bars)
    .style('width', (d) => {
      return (d * 3) + 'px';
    })
    .style('border', '1px solid red')
    .style('background', 'red')
    .text((d) => {
      return d;
    });
  bars.exit()
    .remove();
}

setInterval(() => {
  data.shift()
  data.push(Math.round(Math.random() * 100))
  render(data)
}, 1500)

render(data)

在选集上调用data()将数组绑定在将要创建的图形元素上，调用enter()进入“进入”模式，选出还没有可视化的数据元素；在后面调用merge()函数，以选中的元素，实际上merge()函数作用是进入“进入-更新”模式，进行合并，返回二者的并集，避免重复代码；
最后调用exit()进入“退出“模式，删除没有任何数据关联的图形元素。