目前为止，只要更新数据，我们采用的都是“整批整包”的方式：改变数据集数组中的值，然后重新绑定修改后的值，覆盖原始值对 DOM 元素的绑定。
这种方式非常适合所有值都会改变，而且数据集长度（即数据值的数量）不变的情形。可是我们知道，现实中的数据可没那么简单。这就对代码的灵活性提出了更高要求，比如只更新一两个值，或者支持增加值和减少值，等等。
动态增加删除.gif
- 注意事项：
data() 把数据绑定到元素，但也会返回更新元素集。
更新元素集可能包含加入和退出元素集，这两个元素集可以通过 enter() 和 exit() 方法得到。
在数据值比元素多的情况下，加入元素集会引用尚不存在的占位元素。
在元素比数据值多的情况下，退出元素集会引用没有对应数据的元素。
数据联结用于确定数据值怎么与元素匹配。
默认情况下，数据联结按照索引（也就是值在数据集中出现的顺序）进行。
要对数据联结施加更多控制，可以指定键函数。
<p id="add">Add a new data value</p>
<p id="remove">Remove a data value</p>
//Width and height
var w = 600;
var h = 250;
var dataset = [{ key: 0, value: 5 }, //dataset is now an array of objects.
{ key: 1, value: 10 }, //Each object has a 'key' and a 'value'.
{ key: 2, value: 13 },
{ key: 3, value: 19 },
{ key: 4, value: 21 },
{ key: 5, value: 25 },
{ key: 6, value: 22 },
{ key: 7, value: 18 },
{ key: 8, value: 15 },
{ key: 9, value: 13 },
{ key: 10, value: 11 },
{ key: 11, value: 12 },
{ key: 12, value: 15 },
{ key: 13, value: 20 },
{ key: 14, value: 18 },
{ key: 15, value: 17 },
{ key: 16, value: 16 },
{ key: 17, value: 18 },
{ key: 18, value: 23 },
{ key: 19, value: 25 }];
var xScale = d3.scaleBand()
.domain(d3.range(dataset.length))
.rangeRound([0, w])
.paddingInner(0.05);
var yScale = d3.scaleLinear()
.domain([0, d3.max(dataset, function (d) { return d.value; })])
.range([0, h]);
//Define key function, to be used when binding data
var key = function (d) {
return d.key;
};
//Create SVG element
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
//Create bars
svg.selectAll("rect")
.data(dataset, key)
.enter()
.append("rect")
.attr("x", function (d, i) {
return xScale(i);
})
.attr("y", function (d) {
return h - yScale(d.value);
})
.attr("width", xScale.bandwidth())
.attr("height", function (d) {
return yScale(d.value);
})
.attr("fill", function (d) {
return "rgb(0, 0, " + (d.value * 10) + ")";
});
//Create labels
svg.selectAll("text")
.data(dataset, key)
.enter()
.append("text")
.text(function (d) {
return d.value;
})
.attr("text-anchor", "middle")
.attr("x", function (d, i) {
return xScale(i) + xScale.bandwidth() / 2;
})
.attr("y", function (d) {
return h - yScale(d.value) + 14;
})
.attr("font-family", "sans-serif")
.attr("font-size", "11px")
.attr("fill", "white");
//On click, update with new data
d3.selectAll("p")
.on("click", function () {
//在匿名的监听器函数内部，this 引用被单击的元素（p），因此选择this, 再使用 attr() 就可以取得被单击元素的 ID
var paragraphID = d3.select(this).attr("id");
//Decide what to do next
if (paragraphID == "add") {
//Add a data value
var minValue = 2;
var maxValue = 25 - minValue;
var newNumber = Math.floor(Math.random() * maxValue) + minValue;
var lastKeyValue = dataset[dataset.length - 1].key;
dataset.push({
key: lastKeyValue + 1,
value: newNumber
});
//如果要同时添加和删除
// dataset.shift();
} else {
//Remove a value
dataset.shift(); //Remove one value from dataset
}
//Update scale domains
xScale.domain(d3.range(dataset.length));
yScale.domain([0, d3.max(dataset, function (d) { return d.value; })]);
//Select…
var bars = svg.selectAll("rect")
.data(dataset, key);
//Enter…
bars.enter()
.append("rect")
.attr("x", w)
.attr("y", function (d) {
return h - yScale(d.value);
})
.attr("width", xScale.bandwidth())
.attr("height", function (d) {
return yScale(d.value);
})
.attr("fill", function (d) {
return "rgb(0, 0, " + (d.value * 10) + ")";
})
.merge(bars) //Update…
.transition()
.duration(500)
.attr("x", function (d, i) {
return xScale(i);
})
.attr("y", function (d) {
return h - yScale(d.value);
})
.attr("width", xScale.bandwidth())
.attr("height", function (d) {
return yScale(d.value);
});
//Exit…
bars.exit()
.transition()
.duration(500)
.attr("x", -xScale.bandwidth())
.remove();
//标签的添加、过渡和删除
//Select…
var labels = svg.selectAll("text")
.data(dataset, key);
//Exit…
labels.exit()
.transition()
.duration(500)
.attr("x", -xScale.bandwidth())
.remove();
//Enter…
labels.enter()
.append("text")
.text(function (d) {
return d.value;
})
.attr("text-anchor", "middle")
.attr("x", w)
.attr("y", function (d) {
return h - yScale(d.value) + 14;
})
.attr("font-family", "sans-serif")
.attr("font-size", "11px")
.attr("fill", "white")
.merge(labels) //Update…
.transition()
.duration(500)
.attr("x", function (d, i) {
return xScale(i) + xScale.bandwidth() / 2;
});
});
