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

【问题标题】：Changing Ticks values to text using D3使用 D3 将刻度值更改为文本
【发布时间】：2015-04-01 07:28:48
【问题描述】：

我有一个 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

【问题讨论】：

见stackoverflow.com/questions/11772115/…

标签： javascript d3.js

【解决方案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

【讨论】：