D3.js坐标轴

坐标轴

1. 绘制普通坐标轴

• 绘制坐标轴在svg容器中绘制，利用到SVG的<path>,<line>,<text>，主直线用<path>来绘制，刻度由<line>绘制，文字由<text>绘制。

  let svg = d3.select('body').append("svg") //创建一个SVG容器
         .attr("class","axis")             //类名设置为axis
         .attr("width",500)                //宽度
         .attr("height",500)               //高度
         
  let  xScale = d3.scale.linear()           //定义坐标轴的比例尺
            .domain([0,10])               //定义域
            .range([0,100]);              //值域
            
            
  let axis = d3.svg.axis()                //创建一个轴
           .scale(xScale)                //设置刻度尺
           .orient("bottom")             //设置方向，默认bottom,还有left,right,top 
           .ticks(5);                    //刻度个数
           
  let gAxis = svg.append("g")             //在SVG容器中添加一个g，用来装坐标轴
          .attr("transform","translate(200,400)")//移动g
          .call(axis);                   //将坐标轴扔进去                                                            

  样式可以通过自己设置
  

2.绘制刻度

• 刻度包括方向、间隔、长度和文字格式

  let axisLeft = d3.svg.axis()
              .scale(scale)
              .orient("left")
              .ticks(5);                  //自动生成刻度
  let axisRight = d3.svg.axis()
              .scale(scale)
              .orient("right")
              .ticksValue([3,4,5,6,7])    //指定数组生成刻度         
              .tickFormat(d3.farmat("$0.1f"))//指定刻度的文字格式