坐标轴

标签：images   必须   cal   ges   span   line   tom   cti   data-   

• d3.svg.axis() 创建默认的新坐标系
• axis（selection）将此坐标轴应用到指定的选择集上，改选择集需要包裹有<svg>或<g>
• axis.scale([scale]) 设定或获取坐标轴的比例尺
• axis.orient([orientation])设定或获取坐标轴的方向。
• axis.ticks([argument...]) 设定或获取坐标轴的分隔数。默认是10
• axis.tickValues([values])设定或获取坐标轴的指定刻度
• axis.tickSize([inner,outer])设定或获取坐标轴内外刻度的长度。默认是6
• axis.innerTickSize([size])设定或获取

  坐标轴的内刻度。
  axis.outerTickSize([size])设定或获取坐标轴的外刻度
  axis.tickFormat([format])设定或获取刻度的格式
  var width = 600;
  var height = 600;
  
  var svg = d3.select("body").append("svg")
                  .attr("width",width)
                  .attr("height",height);
  
  var scale = d3.scale.linear()
                  .domain([0,10])
                  .range([0,150]);
      
  var axisLeft = d3.svg.axis()
                  .scale(scale)
                  .orient("left")
                  .ticks(5);
                  
  var axisRight = d3.svg.axis()
                  .scale(scale)
                  .orient("right")
                  .tickValues([3,4,5,6,7]);
                  
  var gAxisLeft = svg.append("g")
              .attr("transform","translate(80,80)")
              .attr("class","axis")
              .call(axisLeft);
              
  var gAxisRight = svg.append("g")
              .attr("transform","translate(100,80)")
              .attr("class","axis")
              .call(axisRight);
  
              
  var axisTop = d3.svg.axis()
                  .scale(scale)
                  .orient("top")
                  .ticks(5)
                  .tickSize(2,4);
                  
  var gAxisTop = svg.append("g")
              .attr("transform","translate(80,30)")
              .attr("class","axis")
              .call(axisTop);
  
  scale.range([0,300]);
              
  var axisBottom = d3.svg.axis()
                  .scale(scale)
                  .orient("bottom")
                  .ticks(5)
                  .tickFormat(d3.format("$0.1f"));
                  
  var gAxisBottom = svg.append("g")
              .attr("transform","translate(80,300)")
              .attr("class","axis")
              .call(axisBottom);

各比例尺的坐标轴

坐标轴必须设置一个比例尺，根据比例尺的不同可以得到不同的坐标轴。
比例尺中，定义域是坐标轴刻度值得范围，值域是坐标轴实际的像素长度。

var width = 600;
var height = 600;

var svg = d3.select("body").append("svg")
                .attr("width",width)
                .attr("height",height);

var linear = d3.scale.linear().domain([0,1]).range([0,500]);

var pow = d3.scale.pow().exponent(2).domain([0,1]).range([0,500]);

var log = d3.scale.log().domain([0.01, 1]).range([0, 500]);

var axisLinear = d3.svg.axis().scale(linear).orient("bottom");

var axisPow = d3.svg.axis().scale(pow).orient("bottom");

var axisLog = d3.svg.axis().scale(log).orient("bottom");

svg.append("g").attr("transform","translate(30,30)").attr("class","axis").call(axisLinear);

svg.append("g").attr("transform","translate(30,60)").attr("class","axis").call(axisPow);

svg.append("g").attr("transform","translate(30,90)").attr("class","axis").call(axisLog);

结果如下图：

                                                 不同比例尺的坐标轴

坐标轴

标签：images   必须   cal   ges   span   line   tom   cti   data-   

原文地址：http://www.cnblogs.com/lmjZone/p/7739260.html