给d3顺序轴标签不同于缩放名称 [英] Give d3 ordinal axis labels different from scale names

问题描述

我有一个序号 scale ，具有不同值的某些标签。我想显示该刻度的轴，其中轴标签与刻度标签不同。我有这个代码：

I have an ordinal scale with certain labels for the different values. I want to display an axis for that scale, where the axis labels are not the same as 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);

这个过去工作，但显然在过去几个月里，它就不再工作。 （此其他问题< a>也说我应该能够使用 tickValues 这种方式。）刻度标签不出现。我在JavaScript控制台中得到一个错误：

This used to work, but apparently there has been some change in d3 in the last few months that causes it to no longer work. (This other question also says I should be able to use tickValues this way.) The tick labels do not appear. I get an error in the JavaScript console saying:

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

跟踪代码，似乎d3试图调用每个tick值的scale;也就是说，它调用 y（This is long），这导致NaN，因为This is long不在比例尺中。我不知道为什么会这样做。

Tracing through the code, it appears that d3 is trying to call the scale on each tick value; that is, it is calling y("This is long"), which results in NaN because "This is long" is not in the scale. I don't know why it's doing this.

这里是一个小提琴显示的问题。如果您注释掉 .tickValues 行，则轴标签正确显示。

Here is a fiddle showing the problem. If you comment out the .tickValues line, the axis labels show up correctly. With that line uncommented, the labels don't work.

在d3中为顺序轴设置标记标签的方法是什么？

What is the way to set tick labels for an ordinal axis in d3?

推荐答案

稍微摆了一下，我发现了答案。看来现在你必须使用 tickFormat 函数来定义轴如何显示它的ticks。解决方案是将 .tickValues 行替换为：

After fiddling around a bit more I found the answer. It seems that now you must use the tickFormat function to define how an axis displays its ticks. The solution is to replace the .tickValues line with this:

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

文档不清楚;它只明确地讨论数字格式化器。它不使格式化程序的API清晰。看起来格式化程序从一个标度中获取单个值作为输入，并且应该返回该值的显示版本。对于顺序量表，该值不能是数字，而是一个有效的量表上的命名值。

The documentation does not make this clear; it only explicitly discusses "number formatters". It does not make the API of a "formatter" clear. It seems that a formatter takes a single value from a scale as input and is supposed to return the display version of that value. For ordinal scales, though, that value may not be a number but a named value on the scale.

这篇关于给d3顺序轴标签不同于缩放名称的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！