d3 API axis

场景

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)
                  ; 

    }