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")ていますが、"This is long" はスケールに含まれていないため、結果は NaN になります。なぜこれを行っているのかわかりません。

ここに問題を示すフィドルがあります。行をコメントアウトする.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 に答える