选择器 selection.data / selection.enter / selection.exit / d3.merge

[ckinmind]

selection.data - 元素和数据绑定 d3.merge - 将多个数组合并成一个 selection.enter - 获得进入（enter）选择器（数据无元素） selection.exit - 获得退出（exit）选择器（元素无数据）

  <div class="chart">
    <div>Billy</div>
    <div>Cindy</div>
    <div>Walter</div>
  </div>

var scores = [
  { name: 'Alice', score: 96 },
  { name: 'Billy', score: 83 },
  { name: 'Cindy', score: 91 },
  { name: 'David', score: 96 },
  { name: 'Emily', score: 88 }
];

var update = d3.select('.chart')
  .selectAll('div')
  .data(scores, function (d) {
    return d ? d.name : this.innerText;
  })
  .style('color', 'blue');  // 已存在的三个div文字变蓝色(有一个后面删了)

var enter = update.enter()
  .append('div')
  .text(function (d) {
    return d.name;
  })
  .style('color', 'green');  // 选出enter部分(有数据无div)然后改变文字为绿色

update.exit().remove();  // 将Walter删除了，暂时不知道为什么

update.merge(enter)   // merge后返回新数组（即存在的加上添加的）
  .style('width', d => d.score + 'px')
  .style('height', '50px')
  .style('background', 'lightgreen')
  .style('border', '1px solid black')

[ckinmind]