Geek Answers Handbook

Give d3 origin axis labels other than scaling names

I have a serial number scalewith specific labels for different values. I want to display an axis for this scale, where the axis labels do not match the scale labels. I have this code:

var width = 1000
var height = 600
var margins = {
left: 100, // 40
right: 25,
bottom: 50,
top: 0
}

var y = d3.scale.ordinal().domain(["This", "That", "Other"]).rangePoints([margins.top, height-margins.bottom], 1);

var svg = d3.select("#plot").append("svg").attr("width",width).attr("height",height)

var yAxis = d3.svg.axis()
  .scale(y)
  .orient("left")
  .tickValues(["This is long", "That is long", "Other is long"])

svg.append("g")
  .attr("class", "axis")
  .attr("transform", "translate(" + margins.left + ",0)")
  .classed("yaxis", true)
  .call(yAxis);

This worked, but apparently in the last few months there have been some changes in d3, which is why it no longer works. ( This other question also says that I should use tickValuesthis way.) Label labels are not displayed. I get an error in the JavaScript console:

Unexpected value translate(0,NaN) parsing transform attribute. @ http://d3js.org/d3.v3.js:596

, , d3 ; y("This is long"), NaN, " " . , .

, . .tickValues, . , .

d3?

+4
1

, , . , tickFormat, , . .tickValues :

.tickFormat(function (d) {
  var mapper = {
    "This": "This is long",
    "That": "That is long",
    "Other": "Other is long"
  }
  return mapper[d]
})

; " ". API "" . , . , .

+17

More articles:


All Articles