values-sw720dp-land等。比如一个控件的宽度，在10寸pad上是10dp，在8寸pad
上是5dp。这时，你可以定义一个变量，button_width，然后在values-sw600dp
下写5dp，在values-sw720-land下写
10dp。这样就达到了在不同尺寸pad上，
相应控件大小不一样的效果。
d3.js 是一个可以基于数据来操作文档的 JavaScript 库，可以帮你使用HTML CSS JS SVG Canvas 来展示数据，它结合强大的视图组件来驱动Dom操作.
d3引入的使用
也可以单独使用某个模块，比如单独使用d3-selection
可以模块化引入
Selections 允许强大的数据驱动文档对象模型(DOM)：设置attributes,styles,HTML 或 text 内容，选择集的方法通常选择当前的选择当前的选择集或者新的选择集，因此允许进行链式调用。
等价于：
选中符合条件的第一个元素，选择条件为 selector 字符串。如果没有元素被选中则返回空选择集，如果选择器有多个，那就返回匹配第一个选择集
选择所有与制定的selector匹配的元素，返回一个数组。如果没有元素被选中，则返回的空的选择集。
视图移动以及缩放是一种流行的交互技术 缩放行为通过 d3-zoom 模块来实现，缩放本身与DOM元素无关，可以用于SVG，HTML 或者 Canvas。
创建一个新的缩放行为,并返回该行为。zoom既是一个对象又是一个函数，通过selection.call()来应用到元素本身上
事件绑定 .zoom 双击禁用缩放 以及 禁止滚动齿轮缩放
D3 提供了 4 个方法用于实现图形的过渡：
- transition()
启动过渡效果，其前后是图形变化前后的状态（形状、位置、颜色等等），例如：
.attr("fill","red") //初始颜色为红色.transition() //启动过渡.attr("fill","blue") //终止颜色为蓝色
D3 会自动对两种颜色（红色和蓝色）之间的颜色值（RGB值）进行插值计算，得到过渡用的颜色值。
- duration()
指定过渡的持续时间，单位为毫秒。
如 duration(2000) ，指持续 2000 毫秒，即 2 秒。
- ease()
指定过渡的方式，常用的有：
linear：普通的线性变化
circle：慢慢地到达变换的最终状态
elastic：带有弹跳的到达最终状态
bounce：在最终状态处弹跳几次
调用时，格式形如： ease("bounce")。
- delay()
指定延迟的时间，表示一定时间后才开始转变，单位同样为毫秒。此函数可以对整体指定延迟，也可以对个别指定延迟。
例如，对整体指定时：
.transition().duration(1000)
.delay(500)
如此，图形整体在延迟 500 毫秒后发生变化，变化的时长为 1000 毫秒。因此，过渡的总时长为1500毫秒。
又如，对一个一个的图形（图形上绑定了数据）进行指定时：
.transition().duration(1000)
.delay(funtion(d,i){ return 200*i
})
如此，假设有 10 个元素，那么第 1 个元素延迟 0 毫秒（因为 i = 0），第 2 个元素延迟 200 毫秒，第 3 个延迟 400 毫秒，依次类推….整个过渡的长度为 200 * 9 + 1000 = 2800 毫秒。
1. 实现简单的动态效果
下面将在 SVG 画布里添加三个圆，圆出现之后，立即启动过渡效果。
//画布大小var width = 500, height = 500// 在body里添加一个SVG画布var svg = d3.select("body").append("svg")
.attr("width",width)
.attr("height",height)
- 第一个圆，要求移动 x 坐标
var circle1 = svg.append("circle").attr("cx", 100)
.attr("cy", 100)
.attr("r", 45)
.style("fill","green")//在1秒（1000毫秒）内将圆心坐标由100变为300circle1.transition()
.duration(1000)
.attr("cx", 300)
- 第二个圆，要求既移动 x 坐标，又改变颜色
var circle2 = svg.append("circle").attr("cx", 100)
.attr("cy", 100)
.attr("r", 45)
.style("fill","green")//在1.5秒（1500毫秒）内将圆心坐标由100变为300，//将颜色从绿色变为红色circle2.transition()
.duration(1500)
.attr("cx", 300)
.style("fill","red")
- 第三个圆，要求既移动 x 坐标，又改变颜色，还改变半径
var circle3 = svg.append("circle").attr("cx",100)
.attr("cy",100)
.attr("r",45)
.style("fill","green")//在2秒（2000毫秒）内将圆心坐标由100变为300//将颜色从绿色变为红色//将半径从45变成25//过渡方式采用bounce（在终点处弹跳几次）circle3.transition()
.duration(2000)
.ease("bounce")
.attr("cx", 300)
.attr("r", 25)
.style("fill","red")
