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

　　

d3 API axis