数据可视化(8)--D3数据的更新及动画

最近项目组加班比较严重，D3的博客就一拖再拖，今天终于不用加班了，赶紧抽点时间写完~~

今天就将D3数据的更新及动画写一写~~

接着之前的博客写~~

之前写了一个散点图的例子，下面可以自己写一个柱状图的例子。

我就直接给代码了，和散点图差不多~~

var margin = {top: 20, right: 20, bottom: 30, left: 40},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;
var dataset = [ 11, 12, 15, 20, 18, 17, 16, 18, 23, 25, 8, 10, 13, 19, 21, 25, 22, 18, 15, 13];
// 使用了d3.scale.ordinal() 它支持范围分档。与定量比例尺（如d3.scale.linear()）返回连续的范围值不同，序数比例尺使用的是离散范围值，也就是输出值是事先就确定好的。
// 映射范围时，可以使用range()，也可以使用rangeBands()。后者接收一个最小值和一个最大值，然后根据输入值域的长度自动将其切分成相等的块或“档”。0.2也就是档间距为每一档宽度的20%。
var x = d3.scale.ordinal()
    .domain(d3.range(dataset.length))
    .rangeBands([0, width], 0.2);
 
var y = d3.scale.linear()
    .domain([0, d3.max(dataset, function(d) { return d; })])
    .range([height, 0]);
 
var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom");
 
var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left");
 
var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
 
svg.selectAll("rect")// 插入的不是circle了，改为rect
    .data(dataset)
    .enter()
    .append("rect")
    .attr("x", function(d,i) {
        return x(i);
    })
    .attr("y", function(d) {
        return y(d);
    })
    .attr("width", x.rangeBand())
    .attr("height", function(d) {
        return height - y(d);
    })
    .attr("fill", function(d){
      return "rgb(60, 127, " + d * 10 + ")";// 根据值的大小获取颜色
    });
svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis)
    .append("text")
      .attr("class", "label")
      .attr("x", width)
      .attr("y", -6)
      .style("text-anchor", "end")
      .text("X轴");
 
  svg.append("g")
      .attr("class", "y axis")
      .call(yAxis)
    .append("text")
      .attr("class", "label")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .text("Y轴");

其效果如下

坐标轴有些粗，是因为CSS没设置，如果设置上在之前博客里的CSS样式，会好看一点~~

先添加一个事件来触发数据的变化，在html中body标签里添加一个button

<button>Update</button>

为button绑定事件，并在事件中添加数据的更新，代码如下

// 单击的时候，更新数据
d3.select("button").on("click", function() {
    // 新数据集
    dataset = [ 21, 22, 25, 10, 18, 17, 6, 8, 13, 15, 15, 20, 23, 19, 11,15, 25, 8, 25, 23 ];
    // 更新所有矩形
    svg.selectAll("rect")
        .data(dataset)
        .attr("y", function(d) {
            return y(d);
        })
        .attr("height", function(d) {
            return height - y(d);
        });
});

运行代码，点击update按钮，chart发生变化，如下

如果你足够细心的话，就会发现，颜色跟原来的一样，没有根据长度发生变化，只要把原来针对fill 编写的代码复制到事件的代码里。

svg.selectAll("rect")
    .data(dataset)
    .attr("y", function(d) {
        return y(d);
    })
    .attr("height", function(d) {
        return height - y(d);
    })
    .attr("fill", function(d){
        return "rgb(60, 127, " + d * 10 + ")";// 根据值的大小获取颜色
    });

是不是颜色也跟着变化了。

你是不是觉得，就这么变化有些太坑了，那我们就给它加个动画，过渡一下就OK了，其实现只需简单的一行代码 .transition()

注：在方法链上，要把这个调用插到选择元素之后，改变任何属性之前

svg.selectAll("rect")
    .data(dataset)
    .transition() // <-- 这是新代码，其他都保持不变。
    .attr("y", function(d) {
        return y(d);
    })
    .attr("height", function(d) {
        return height - y(d);
    })
    .attr("fill", function(d){
        return "rgb(60, 127, " + d * 10 + ")";// 根据值的大小获取颜色
    });

是不是有了动画，就不会觉得变化有些突然了~~

之后，我觉得想控制一下动画的时间，要让他快一点或者慢一点，其实现也只需要一行代码 .duration(2000)

svg.selectAll("rect")
    .data(dataset)
    .transition()
    .duration(2000) // <-- 这是新代码，其他都保持不变。2000 毫秒，即2 秒
    .attr("y", function(d) {
        return y(d);
    })
    .attr("height", function(d) {
        return height - y(d);
    })
    .attr("fill", function(d){
        return "rgb(60, 127, " + d * 10 + ")";// 根据值的大小获取颜色
    });

你延长了一下动画时间，发现它的动画一开始非常慢，然后逐渐加速，最后在达到预定高度之前速度再次慢了下来。换句话说，动画的速度不是线性不变的，而是有加减速变化的。

如果，我想要均匀的变化怎么办？

在D3 中，可以使用ease() 指定不同的缓动类型。默认的缓动效果是"cubic-inout"，产生的就是我们刚刚看到的那种逐渐加速然后再逐渐减速的效果。

所以我们只需要设置一下ease("linear")就可以了。我们要在transition() 之后、attr() 之前指定ease()。事实上，ease()在duration() 之前之后都没问题，但先过渡再设置缓动似乎更顺理成章。

... // 选择元素的代码
.transition()
.duration(2000)
.ease("linear")
... //attr() 的代码

linear是线性缓动，就是没有逐渐加速和减速的变化，所有元素都按照一个速度变化，变化到最终值时戛然而止。

除此之外，还有很多缓动函数可供选择。下面只是几个，不是全部
• circle
逐渐进入并加速，然后突然停止。
• elastic
描述这个效果的一个最恰当的词是“有弹性”。
• bounce
像皮球落地一样反复弹跳，慢慢停下来。

详细可以查看：https://github.com/mbostock/d3/wiki/Transitions#wiki-d3_ease

我们再来想一下，如果这个动画，我不想让它一开始就跑起来，我想让它晚点跑起来，比如说2秒后。

那我们只需要在添加一个方法.delay(2000)，就OK了

...
.transition()
.delay(2000) //2000 毫秒，即2 秒
.duration(2000) //2000 毫秒，即2 秒
...

与使用duration() 和ease() 一样，把delay() 放到哪里并没有十分严格的限制，但我更喜欢把它放在duration() 前面。因为是先设定延迟时间，然后过渡动画才开始计时，这样比较符合逻辑。

上面的代码是静态延时，静态延迟时间只是一种延迟方式，更有意思的是可以动态计算延迟时间。动态延迟的一个常见用途就是创建交错延迟的效果，让某些过渡在另一个过渡之前发生。交错延迟对人的感知有利，因为当相邻元素的变化不那么同步时，人眼更容易注意到每个元素的变化。要设置动态延迟，就别给delay() 传递静态值，而是给它传入一个函数，按照D3 的惯例……对，就是传入一个匿名函数。

...
.transition()
.delay(function(d, i) {
    return i * 100;
})
.duration(500)
...

在匿名函数中，与当前元素绑定的数据值是以d 传入的，而这个元素的位置是以i传入的。因此，这里的意思是让D3 循环遍历每个元素，把它们的动画延迟时间设定为i * 100，也就是后一个元素的动画开始时间总比前一个元素晚100 毫秒。

到这里，也许你会提出一个疑问，如果变化的时候数据超出了原来的范围，怎么办？

那我们就需要更新比例尺了，更新比例尺的代码很简单。

// 更新比例尺的值域
y.domain([0, d3.max(dataset)]);

今天就先到这里，写博客时间长了，觉得有点腰疼。

等有时间再继续更新吧~~

继续写这篇博客，就不另起一篇了~~

迄今为止，只要更新数据，我们采用的都是“整批整包”的方式：改变数据集数组中 的值，然后重新绑定修改后的值，覆盖原始值对DOM 元素的绑定。这种方式非常适合所有值都会改变，而且数据集长度（即数据值的数量）不变的情形。可是我们知道，现实中的数据可没那么简单。这就对代码的灵活 性提出了更高要求，比如只更新一两个值，或者支持增加值和减少值。

添加值（和元素）

首先我们需要在数据中插入一个值，并更新一下数轴的值域。

dataset.push(10);
x.domain(d3.range(dataset.length));

然后选出之前的元素，然后插入，插入的代码跟刚开始的代码很像。

// 加入……
var bars = svg.selectAll("rect")
    .data(dataset);// 选择出之前的元素
bars.data(dataset)
    .enter()
    .append("rect")
    .attr("x", x(dataset.length - 1))//这行代码设定了新条形的水平位置，让它恰好位于SVG 区域的最右边。
    .attr("y", function(d) {
        return y(d);
    })
    .attr("width", x.rangeBand())
    .attr("height", function(d) {
        return height - y(d);
    })
    .attr("fill", function(d){
      return "rgb(60, 127, " + d * 10 + ")";
    });

最后，再更新所有的数据就OK了

bars.transition()
    .duration(500)
    .attr("x", function(d, i) {
    return x(i);
    })
    .attr("y", function(d) {
        return y(d);
    })
    .attr("width", x.rangeBand())
    .attr("height", function(d) {
        return height - y(d);
    })
    .attr("fill", function(d){
      return "rgb(60, 127, " + d * 10 + ")";
    });

这样，动态的添加一条数据就实现了，然后你会发现数据的坐标轴的刻度没有变，那就需要再去更新一下坐标轴的刻度。在更新值域的代码后面，添加如下代码

xAxis.scale(x);
svg.select("g.x.axis")
    .call(xAxis);

你会发现坐标轴的刻度也跟着变化了~~

删除值（和元素）

把每次单击时添值到数据集，改为使用shift() 方法从数组中删除第一个元素。

// 从数据集中删除一个值
dataset.shift();

然后取得退出元素集，然后把它们过渡到右边，最后，删除它们

// 退出……
bars.exit()
    .transition()
    .duration(500)
    .attr("x", w)
    .remove();

remove() 是一特殊的过渡方法，它会在过渡完成后从DOM 中永远地删除元素。移除之后坐标轴的更新和之前的添加元素相同。

通过键联结数据

在把数据绑定到DOM 元素时（即调用data() 时），就会发生数据联结。默认的联结是按照索引顺序，即第一个值绑定到元素集中第一个DOM 元素，第二个值绑定到元素集中第二个DOM 元素，依此类推。如果数据值与DOM 元素的顺序不一样呢？那就得告诉D3 怎么实现值和元素间的联结或配对。好在，通过定义键函数（key：function），可以指定相应的规则。

先准备数据，之前，我们的数据集就是包含简单数值的数组。而为了使用键函数，每个值必须有对应的键。

var dataset = [ 
        { key: 0, value: 5 },
        { key: 1, value: 10 },
        { 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 }
];        

更新引用，许多以前用d的地方要修改为d.value，如

var y = d3.scale.linear()
    .domain([0, d3.max(dataset, function(d) { return d.value;})])
    .range([0, height]);

链接键函数，在data一个数据集时，使用如下代码，就OK了。

.data(dataset, function(d) {
    return d.key;
})

关于数据的更新和动画就先到这里为止了，之后会写D3的交互和布局~~