目前為止，只要更新數(shù)據(jù)，我們采用的都是“整批整包”的方式：改變數(shù)據(jù)集數(shù)組中的值，然后重新綁定修改后的值，覆蓋原始值對 DOM 元素的綁定。

這種方式非常適合所有值都會改變，而且數(shù)據(jù)集長度（即數(shù)據(jù)值的數(shù)量）不變的情形。可是我們知道，現(xiàn)實中的數(shù)據(jù)可沒那么簡單。這就對代碼的靈活性提出了更高要求，比如只更新一兩個值，或者支持增加值和減少值，等等。

動態(tài)增加刪除.gif

• 注意事項：

• data() 把數(shù)據(jù)綁定到元素，但也會返回更新元素集。

• 更新元素集可能包含加入和退出元素集，這兩個元素集可以通過 enter() 和 exit() 方法得到。

• 在數(shù)據(jù)值比元素多的情況下，加入元素集會引用尚不存在的占位元素。

• 在元素比數(shù)據(jù)值多的情況下，退出元素集會引用沒有對應數(shù)據(jù)的元素。

• 數(shù)據(jù)聯(lián)結用于確定數(shù)據(jù)值怎么與元素匹配。

• 默認情況下，數(shù)據(jù)聯(lián)結按照索引（也就是值在數(shù)據(jù)集中出現(xiàn)的順序）進行。

• 要對數(shù)據(jù)聯(lián)結施加更多控制，可以指定鍵函數(shù)。

<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 () {

        //在匿名的監(jiān)聽器函數(shù)內部，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;
            });
    });