【D3.js 学习总结】1、初识D3

D3是指数据驱动文档（Data-Driven Documents），根据D3的官方定义：

D3.js是一个JavaScript库，它可以通过数据来操作文档。D3可以通过使用HTML、SVG和CSS把数据鲜活形象地展现出来。D3严格遵循Web标准，因而可以让你的程序轻松兼容现代主流浏览器并避免对特定框架的依赖。同时，它提供了强大的可视化组件，可以让使用者以数据驱动的方式去操作DOM。----D3维基（2013年8月）

从一个Hello Wordld示例来看看d3如何运行 点击查看在线DEMO

  function render(data){
    var demo = d3.select('body')
        .selectAll('p')
        .data(data, function (d) {
          return d;
        });
    demo.enter()
        .append('p')
        .style('width', 0+'px')
        .style('background', '#eee')
    demo
        .text(function (d) {
          return d;
        })
        .transition()
        .duration(1000)
        .style('width', function (d) {
          return d+'px';
        })
    demo.exit()
        .transition()
        .duration(1000)
        .style('width', 0+'px')
        .remove();
  }

  render([100,300,500]);

  setTimeout(function(){
    render([300,500,1000]);
  },1000)

通过链式风格的方式让整个运行步骤非常清晰，D3的API设计跟我们平时用的Jquery很像，所以理解起来比较容易。
Hello World示例展示了数据如何驱动页面展示，在render方法里通过数据的变化，它做到了初始化新数据，更新已有数据，删除无效数据这样一个完整的环节；