Open ckinmind opened 7 years ago
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')
selection.data - 元素和数据绑定 d3.merge - 将多个数组合并成一个 selection.enter - 获得进入(enter)选择器(数据无元素) selection.exit - 获得退出(exit)选择器(元素无数据)