私のx軸には現在番号付きの目盛りがあります。目盛りをオブジェクトのデータ(具体的にはkeywordの値)で置き換えます。どうすればこれを達成できますか?
var dataset = [
{"keyword": "payday loans", "global": 1400000, "local": 673000, "cpc": "14.11"},
{"keyword": "title loans", "global": 165000, "local": 160000, "cpc": "12.53" },
{"keyword": "personal loans", "global": 550000, "local": 301000, "cpc": "6.14"},
{"keyword": "online personal loans", "global": 15400, "local": 12900, "cpc": "5.84"},
{"keyword": "online title loans", "global": 111600, "local": 11500, "cpc": "11.74"}
];
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom");
// xAxis
svg.append("g") // Add the X Axis
.attr("class", "x axis")
.attr("transform", "translate(0," + (h) + ")")
.call(xAxis);
//xAxis Label
svg.append("text")
.attr("transform", "translate(" + (w / 2) + " ," + (h + margin.bottom - 5) +")")
.style("text-anchor", "middle")
.text("Keyword");
これを実現する最も簡単な方法は、軸にtickFormat
関数を設定することです。
var xAxis = d3.svg.axis()
.scale(xScale)
.tickFormat(function(d) { return dataset[d].keyword; })
.orient("bottom");
ラベルに合わせて幅を少し微調整する必要がある場合があります(または 回転 )。
これを行う「適切な」方法は、配列インデックスの代わりにキーワードとしてxScale
のドメイン値を指定することです。次に、xScale
を使用する他のすべてのコードも変更する必要があります。
これは序数軸と呼ばれます。チェックアウト 作成者からの例