5

我有一个scale带有不同值的特定标签的序数。我想显示该比例的轴，其中轴标签与比例标签不同。我有这个代码：

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

这曾经有效，但显然在过去几个月中 d3 发生了一些变化，导致它不再有效。（这个另一个问题也说我应该能够使用tickValues这种方式。）不出现刻度标签。我在 JavaScript 控制台中收到错误消息：

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

跟踪代码，似乎 d3 试图在每个刻度值上调用刻度；也就是说，它正在调用y("This is long")，这会导致 NaN，因为“This is long”不在比例中。我不知道它为什么这样做。

这是一个显示问题的小提琴。如果您注释掉该.tickValues行，则轴标签会正确显示。如果该行未注释，则标签不起作用。

在d3中为序数轴设置刻度标签的方法是什么？

4

1 回答 1

20

在多摆弄之后，我找到了答案。看来现在您必须使用该tickFormat函数来定义轴如何显示其刻度。解决方案是用以下代码替换该.tickValues行：

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

文档没有说明这一点；它只明确讨论“数字格式化程序”。它没有使“格式化程序”的 API 清晰。似乎格式化程序从刻度中获取单个值作为输入，并且应该返回该值的显示版本。但是，对于序数刻度，该值可能不是数字，而是刻度上的命名值。

于 2013-11-15T06:00:17.110 回答