D3.JS坐标轴的使用

      网络上讲解绘图的资料很多，但是，很少从工程应用的角度来讲的。作为工程应用，首先是要建立坐标系，然后才谈其他的内容。所以，本系列先从坐标系谈起。

因为多数绘图都是使用位图（canvans）的，但是这个图不能缩放，精度不好。所以，本人倾向于采用SVG——矢量图，便于缩放。基于SVG的jS框架中，以D3的功能更强大一些，所以选择了D3。

建立绘图坐标一般需要这样几个步骤：

1.首先定义绘图区域，包括长、宽，边界；根据这些内容可以计算坐标轴的长度。

2.创建SVG变量。

3.绘制绘图的边框——就是为了好看，而且能够清晰地显示出所用区域。

4.定义坐标变换，这个很重要。

5.创建坐标轴。

6.绘制坐标轴。

//这是采用jquery的ready函数

$(function () {

    testAxisA(); //这是真正的绘图函数

});

function testAxisA() {

    console.info("测试D3.js的坐标轴");

   //绘图区域定义

    var height = 300,

            width = 400,

            margin = 50,

            offset = 50,

            axisWidth = width - 2 * margin,

            axisHeight = height - 2 * margin,

            svg;

   //创建SVG

    svg = d3.select("#graphicDiv").append("svg")

            .attr("class", "axis")

            .attr("width", width)

            .attr("height", height);

    //画一个边框--外围的

    svg.append("rect")

            .attr("class", "rect")

            .attr("x", 0)

            .attr("y", 0)

            .attr("width", width)

            .attr("height", height);

    

    //里面的边框

    svg.append("rect")

            .attr("class", "rectA")

            .attr("x", margin)

            .attr("y", margin)

            .attr("width", axisWidth)

            .attr("height", axisHeight);

    //定义坐标变换

    var scaleA = d3.scale.linear().domain([0, 1000]).range([0, axisWidth]);

    var scaleB = d3.scale.linear().domain([0, 1000]).range([axisHeight, 0]);
//注意，Y坐标轴的定义是有些特殊的，需要变换方向。

    //这个变量决定坐标轴绘制的时候处于什么位置，X轴 可以上上下，Y轴是左右。

    var orientA = "bottom";

   //定义坐标轴

    var axisX = d3.svg.axis()

            .scale(scaleA)

            .orient(orientA)

            .ticks(5);

    var axisY = d3.svg.axis()

            .scale(scaleB)

            .orient("left")

            .ticks(5);

    //具体的绘制，其中 第二个变量指示坐标轴的起始位置。

    svg.append("g").attr("transform", "translate(50, 250)").call(axisX);

    svg.append("g").attr("transform", "translate(50, 50)").call(axisY);

}

另外需要注意的是“样式”， 缺省的样式不好看，推荐的样式如下：

.axis path,

.axis line{

    fill: none;

    stroke: black;

    shape-rendering: crispEdges;

}

.axis text {

    font-family: sans-serif;

    font-size: 11px;

}

.rect {

    fill:rgb(125,125,125);

    stroke-width:1;

    stroke:rgb(0,0,0)

}

.rectA {

    fill:rgb(255,255,255);

    stroke-width:1;

    stroke:rgb(0,0,0)

}