enter, update和exit

    
         
      
       h
          
      
       e
          
      
       l
          
      
       l
          
      
       o
        
     
    

这里实际的数据为: ["h", "e", "l", "l", "o"]. 我们需要将实际的数据和<text>相关联起来. 所以我们需要以下步骤:

1) 使用data函数将数据绑定到所选择的DOM元素<text>上.

2) 使用enter函数进入每个需要修改的<text>元素.

3) 更新<text>元素(例如使用attr来更新属性)

4) 使用exit来退出此次的修改.

transition

transition为过渡, 从选中的当前元素移动到目标元素位置.

我们在界面上显示hello, 并缓慢的展开其坐标x的位置:

1. select用来选中要操作的DOM元素, 而append用来生成新的DOM元素.

2. 使用data()函数读取数组, 这里需要使用selectAll选取所有的text. 例如数组data有五个元素, 则会生成五个<text>

3. 使用transition()开启过渡功能, 使用duration设定过渡的时间(毫秒)

4. 运行程序, 我们会看到坐标x/y在快速的变大, 然后"hello"字母会扩展开来.

仔细查看如上代码的运行结果会发现, 实际上Y和X的坐标变化几乎是同时的, 而并非Y轴扩展完毕后, X轴才继续扩展.

d3.js的作者解释这种情况时候, 说两个看似同步执行, 实际上它们之间的差距就几毫秒.

如果想要顺序执行, 则调用每一次的transition/duration:

text.enter()      .append('text')      .transition()      .duration(2000)      .attr('dy', function(d, i) { return (i + 1) * 32; })      .transition()      .duration(1000)      .attr('x', function(d, i) { return i * 32; })      .text(function(d) { return d; });

后记

1. 学习资料来自: