09-D3.js动态增删数据

目前为止，只要更新数据，我们采用的都是“整批整包”的方式：改变数据集数组中的值，然后重新绑定修改后的值，覆盖原始值对 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;
            });
    });