D3入门系列(2)--简单的条形图、折线图、散点图和文本换行

SVG画布

HTML 5 提供两种强有力的“画布”：SVG 和 Canvas。

SVG的特点：

• SVG 绘制的是矢量图，因此对图像进行放大不会失真
• 基于 XML，可以为每个元素添加 JavaScript 事件处理器
• 每个图形均视为对象，更改对象的属性，图形也会改变
• 不适合游戏应用

Canvas特点：

• 绘制的是位图，图像放大后会失真
• 不支持事件处理器
• 能够以 .png 或 .jpg 格式保存图像
• 适合游戏应用

那么，对于数据可视化，SVG的优势就显而易见了，而且D3中很多图形生成器也是只支持SVG的

注意，在 SVG 中，x 轴的正方向是水平向右，y 轴的正方向是垂直向下的。

Step1  添加SVG画布

 var width = 400;  //画布的宽度
 var height = 400;   //画布的高度
 
 var svg = d3.select("body")     //选择文档中的body元素
     .append("svg")          //添加一个svg元素
     .attr("width", width)       //设定宽度
     .attr("height", height);    //设定高度

//画布周边的空白
 var padding = {left:30, right:30, top:20, bottom:20};

如此，便可以在画布上作图了

比例尺

利用比例尺的目的主要是将某一区域的值映射到另一区域，其大小关系不变，也就是说，让图形自适应画布的大小。

在数学中，x 的范围被称为定义域，y 的范围被称为值域。D3 中的比例尺，也有定义域和值域，分别被称为 domain 和 range。开发者需要指定 domain 和 range 的范围，如此即可得到一个计算关系。

D3中的比例尺最常用的有两种：

线性比例尺

d3.scale.linear() 返回一个线性比例尺。domain() 和 range() 分别设定比例尺的定义域和值域

var dataset = [1.2, 2.3, 0.9, 1.5, 3.3];

var min = d3.min(dataset);
var max = d3.max(dataset);

var linear = d3.scale.linear()
        .domain([min, max])
        .range([0, 300]);

linear(0.9);    //返回 0
linear(2.3);    //返回 175
linear(3.3);    //返回 300

注意：d3.scale.linear() 的返回值，是可以当做函数来使用的。因此，才有这样的用法：linear(0.9)。

序数比例尺

d3.scale.ordinal() 返回一个线性比例尺。domain() 和 range() 分别设定比例尺的定义域和值域

var index = [0, 1, 2, 3, 4];
var color = ["red", "blue", "green", "yellow", "black"];

var ordinal = d3.scale.ordinal()
        .domain(index)
        .range(color);

ordinal(0); //返回 red
ordinal(2); //返回 green
ordinal(4); //返回 black

 0 对应颜色 red，1 对应 blue，依次类推

Step2  定义数据和比例尺

 var dataset=[10, 20, 30, 40, 33, 24, 12, 5];
 
 //x轴
 var xScale=d3.scale.ordinal()
              .domain(d3.range(dataset.length))
              .rangeRoundBands([0,width-padding.left-padding.right]);
 
 //y轴
 var yScale=d3.scale.linear()
              .domain([0,d3.max(dataset)])
              .range([height-padding.top-padding.bottom,0]);//y轴正方向向下

ordinal.rangeRoundBands - 用几个离散区间来分割一个连续的区间，区间边界和宽度会取整

 坐标轴

D3中用于定义坐标轴的组件：d3.svg.axis()

//数据
var dataset = [ 2.5 , 2.1 , 1.7 , 1.3 , 0.9 ];
//定义比例尺，其中使用了数组dataset
var linear = d3.scale.linear()
      .domain([0, d3.max(dataset)])
      .range([0, 250]);
//定义坐标轴，其中使用了线性比例尺linear
var axis = d3.svg.axis()
     .scale(linear)      //指定比例尺
     .orient("bottom")   //指定刻度的方向
     .ticks(7);          //指定刻度的数量

 追加到画布上：

svg.append("g")
  .attr("class","axis")
  .attr("transform","translate(20,130)")
  .call(axis);  

注意： svg.append("g").call(axis); 与 axis(svg.append(g)); 是相等的。

为axis设定样式（y也是常用的样式了）

<style>
.axis path,
.axis line{
    fill: none;
    stroke: black;
    shape-rendering: crispEdges;
}

.axis text {
    font-family: sans-serif;
    font-size: 11px;
}
</style>

Step3  定义坐标轴

//定义x轴
var xAxis = d3.svg.axis()
    .scale(xScale)
    .orient("bottom");
        
//定义y轴
var yAxis = d3.svg.axis()
    .scale(yScale)
    .orient("left");

Step4  添加矩形和文字元素

//矩形之间的空白
var rectPadding = 4;

//添加矩形元素
var rects = svg.selectAll(".MyRect")
        .data(dataset)
        .enter()
        .append("rect")
        .attr("class","MyRect")
        .attr("transform","translate(" + padding.left + "," + padding.top + ")")
        .attr("x", function(d,i){
            return xScale(i) + rectPadding/2;
        } )
        .attr("y",function(d){
            return yScale(d);
        })
        .attr("width", xScale.rangeBand() - rectPadding )
        .attr("height", function(d){
            return height - padding.top - padding.bottom - yScale(d);
        })
        .attr("fill","steelblue");

//添加文字元素
var texts = svg.selectAll(".MyText")
        .data(dataset)
        .enter()
        .append("text")
        .attr("class","MyText")
        .attr("transform","translate(" + padding.left + "," + padding.top + ")")
        .attr("x", function(d,i){
            return xScale(i) + rectPadding/2;
        } )
        .attr("y",function(d){
            return yScale(d);
        })
        .attr("dx",function(){
            return (xScale.rangeBand() - rectPadding)/2;
        })
        .attr("dy",function(d){
            return 20;
        })
        .text(function(d){
            return d;
        });

Step5  添加坐标轴元素

//添加x轴
svg.append("g")
  .attr("class","axis")
  .attr("transform","translate(" + padding.left + "," + (height - padding.bottom) + ")")
  .call(xAxis); 
        
//添加y轴
svg.append("g")
  .attr("class","axis")
  .attr("transform","translate(" + padding.left + "," + padding.top + ")")
  .call(yAxis);

折线图

    //定义画布
    var width=400;
    var height=400;

    var svg=d3.select("body")
              .append("svg")
              .attr("width",width)
              .attr("height",height);
    //定义内边距
    var padding={left:20,right:20,top:10,bottom:10};
    
    //数据
    var dataset=[11,35,23,78,55,18,98,100,22,65]
    //定义比例尺
    var xscale=d3.scale.linear()
                 .domain([0,dataset.length-1])
                 .range([0,width-padding.left-padding.right])
    var yscale=d3.scale.linear()
                 .domain([0,d3.max(dataset)])
                 .range([height-padding.top-padding.bottom,0])
    //绘制坐标轴
    var xAxis=d3.svg.axis()
                .scale(xscale)
                .orient("bottom")
    var yAxis=d3.svg.axis()
                .scale(yscale)
                .orient("left")
    d3.select("svg")
     .append("g")
     .attr("transform","translate(" + padding.left + "," + (height - padding.bottom) + ")")
     .call(xAxis)
     .attr("class","axis")
     
    d3.select("svg")
     .append("g")
     .attr("transform","translate("+padding.left+","+padding.top+")")
     .call(yAxis)
     .attr("class","axis")

    
    //绘制图形
    var line_generator=d3.svg.line()
                         .x(function(d,i){
                             return xscale(i)//x轴的点用数据下标表示
                         })
                         .y(function(d){
                             return yscale(d)
                         });
                         //.interpolate("linear")
    var g=svg.append("g")
            .attr("transform","translate("+padding.left+","+padding.top+")")

    
    g.append("path")
      .attr("d",line_generator(dataset))
      .attr('stroke', 'black')
      .attr('stroke-width', 1)
      .attr("fill","none")

 散点图

关键代码如下：

var circle=svg.selectAll("circle")
                  .data(dataset)
                  .enter()
                  .append("circle")
                  .attr("fill","black")
                  .attr("r",3)
                  .attr("cx",function(d){
                      return padding.left+xscale(d[0])
                  })
                  .attr("cy",function(d){
                      return padding.top+yscale(d[1])  //重要！！
                  })

上面标红的地方说明以下，本来想着y轴向下，便写成了 height-padding.bottom-yscale(d[1]) 

但是发现画出的点的位置并不正确，原来原因是上面定义比例尺时，将值域已经设置成了 [height-2*padding.top,0] ，可以说，此时的坐标轴方向已经反转，所以此时的计算只需加上 padding.top 即可

其实，更不易出错的方法是，将点放在一个group内，那么cx, cy只需按比例计算，然后在将group做一个transform变换即可。如上面画折线图的方法。

文本的换行

最后讲一下文本的换行

方法1：利用tspan标签

var str = "云中谁寄锦书来，雁字回时，月满西楼";            
            
var text = svg.append("text")
            .attr("x",30)
            .attr("y",100)
            .attr("font-size",30)
            .attr("font-family","simsun");
//将字符串分段
var strs = str.split("，") ;

text.selectAll("tspan")
    .data(strs)
    .enter()
    .append("tspan")
    .attr("x",text.attr("x"))  //文本从x=?处开始
    .attr("dy","1em")  //文本较y轴的相对位移，此处也就意味着换行
    .text(function(d){
        return d;
         });

方法2：引用库 http://www.ourd3js.com/library/multext.js，其实质仍旧是tspan，只是进行了封装罢了

文件里只实现了一个函数 appendMultiText()，其各参数的意义为：

appendMultiText(
    container,            //文本的容器，可以是<svg>或<g> 
    str,                 //字符串
    posX,                 //文本的x坐标
    posY,                 //文本的y坐标
    width,                 //每一行的宽度，单位为像素
    fontsize,             //文字的大小（可省略），默认为 14
    fontfamily            //文字的字体（可省略），默认为 simsun, arial
)

小实例：

var str = "青青子衿，悠悠我心，但为君故，沉吟至今。";            
                        
var multext = appendMultiText(svg,str,30,100,120,20,"simsun");
                
multext.attr("transform","rotate(-20)");