d3.js x軸のテキストを指定

Question

x軸には現在番号がついています。私はダニをオブジェクトからのデータ（具体的にはキーワードの値）に置き換えて欲しいです。どうすればこれを達成できますか？あなたがラベルに合わせて幅を少し微調整する必要がある場合があります

var xAxis = d3.svg.axis() 
    .scale(xScale) 
    .tickFormat(function(d) { return dataset[d].keyword; }) 
    .orient("bottom"); 

（または：

I have a working Fiddle

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

Answer 1

これを達成する最も簡単な方法は、あなたの軸のtickFormat機能を設定することですrotate them）。

これを行う「適切な」方法は、配列インデックスではなくキーワードとしてxScaleのドメイン値を指定することです。しかし、あなたは同様にxScaleを使用する他のすべてのコードを変更する必要があります。

Answer 2

これは順序軸と呼ばれ、チェックアウトされます。the example from the creator