使用 D3 将刻度值更改为文本

Question

我有一个d3代码

 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

我希望刻度标签为 a、b、c、d 而不是 0,50,60,100

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

使用.tickFormat

使用 D3 将刻度值更改为文本

Changing Ticks values to text using D3

javascript

d3.js