首页 > Windows开发 > 详细

d3 API axis

时间:2016-08-18 21:26:40      阅读:370      评论:0      收藏:0      [点我收藏+]

场景

1、画网格线

使用方法.innerTickSize(): 指定内刻度大小

或者

.tickSize(inner, outer):

2、内外刻度线

innerTickSize

outerTickSize

tickSize

看需求调吧。

3、

tickFormat 格式化

tickPadding 刻度和刻度线的间距

tickValues 指定刻度值,要根据xScale

 

Test.prototype.xScale = function(length) {

      return d3.scale.linear()
               .domain([0, length-1])
               .range([this.padding, this.width - this.padding]);
    }

    Test.prototype.xAxis = function(xScale) {
        
        return d3.svg.axis()
                 .scale(xScale)
                 .orient("bottom")
                 .ticks(5)
                 // .tickFormat(d3.format("%Y"))
                 // .tickValues([1, 2, 3, 5, 8, 13, 21])
                 // .tickSize(-(this.width - this.padding * 2))
                 // .innerTickSize(-(this.width - this.padding * 2))
                 .outerTickSize(-(this.width - this.padding * 2))
                 // .tickSize(-(10))
                 ; 

    }

    Test.prototype.xBars = function(svg, xAxis) {
      
        return svg.append(‘g‘)
                  .attr(‘class‘, ‘x axis‘)
                  .attr(‘transform‘, ‘translate(0,‘+(this.height - this.padding)+‘)‘)
                  .call(xAxis)
                  ; 

    }

  

d3 API axis

原文:http://www.cnblogs.com/wang-jing/p/5785230.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!