d3.data()

data函数的详细介绍

by miSunLaughing

HTML

<div id="p">
    <p>a</p>
    <p>b</p>
    <p>c</p>
</div>

<div id="span">
    <p>x</p>
    <p>y</p>
    <p>z</p>
</div>

CSS

div {
  margin-bottom: 50px;
}
p {
  height: 30px;
  line-height: 30px;
  border: 1px solid #000;
  padding: 0 10px;
}

JavaScript

// 原始数据、选择集
var pSelection = d3.select('#p').selectAll('p');
var dataSet = ['1', '2', 'c', 'd', 'e'];
var spanSelection = d3.select('#span').selectAll('p');
var dataSet2 = ['x', 'b'];

// update
var pUpdate = pSelection.data(dataSet);
var spanUpdate = spanSelection.data(dataSet2);
pUpdate.text(function(d) { return d });
spanUpdate.text(function(d) { return d });

// enter
var pEnter = pUpdate.enter();
pEnter.append('p').text(function(d) { return d });


// exit 
var pExit = spanUpdate.exit();
pExit.remove();