利用D3.js 做一个简单的图表

表格如下

1.”画布”是什么？
如果你想作图，你需要一个画布
html5 privode two,one is canvas,another is svg

• svg
  特点
  1.svg绘制的是矢量图形，因此放大后不会失真
  2.svg是基于xml的，可以为每个元素添加JavaScript事件
  3.svg不适合游戏应用
  4.每个图像都是一个对象，更改对象的属性，图形也会改变
• canvas
  1、绘制的是位图，放大后会失真
  2、不支持事件处理器
  3、适合游戏开发
  4、能够以png或者jpg格式保存图像

2.添加画布
推荐使用svg画布

//在body元素中添加svg画布代码
     <script>
          var height="300";
          var width="300";
          var svg=d3.select("body").append("svg");
          svg.attr("height",height);
          svg.attr("width",width);
     </script>

3.绘制矩形

    <script>
      var height="300";
      var width="300";
      var dataset = [ 250 , 210 , 170 , 130 , 90 ]; 
      var rectHeight=25;
      var svg=d3.select("body").append("svg");
      svg.selectAll("rect")
        .data(dataset)
        .enter()
        .append("rect")
        .attr("x",20)
        .attr("y",function(d,i){
            return i*rectHeight;
        })
        .attr("height",function(d,i){
            return rectHeight-2;
        })
        .attr("width",function(d,i){
            return d;
        })
    </script
   //矩形的四个基本属性，x,y,width,height

//下面这几行代码务必记住
//选择svg中所有的rect元素，即使目前没有任何rect也可以
svg.selectAll("rect")   
    .data(dataset)  //绑定数组
    .enter()        //指定选择集的enter部分
    .append("rect")  //添加足够数量的rect元素

有数据，但是没有足够的图形元素，可以使用上面的语句