Changing Ticks values to text using D3

问题:

I have a d3 code

 svg = d3.select("svg")

var myScale = d3.scale.linear()
    .domain([0,100])
    .range([0,400]);


var ticks = [0,50,60,100];

  var myAxis = d3.svg.axis()
.scale(myScale)
.tickValues(ticks);

  svg.append("g")
    .attr("class", "axis")
    .call(myAxis)
    .attr("transform","translate(100,100)");

http://tributary.io/inlet/5207532

I want tick labels as a,b,c,d instead as 0,50,60,100

回答1:

svg = d3.select("svg")

var myScale = d3.scale.linear()
        .domain([0,100])
        .range([0,400]);


var ticks = [0,50,60,100];
var tickLabels = ['a','b','c','d']

var myAxis = d3.svg.axis()
  .scale(myScale)
  .tickValues(ticks)
.tickFormat(function(d,i){ return tickLabels[i] });

svg.append("g")
        .attr("class", "axis")
        .call(myAxis)
        .attr("transform","translate(100,100)");

Use .tickFormat