使用D3将Ticks值更改为文本 [英] Changing Ticks values to text using D3

问题描述

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

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

推荐答案

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将Ticks值更改为文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！