d3.js x 축에 텍스트 지정

Question

x 축에 현재 번호가 매겨진 틱이 있습니다. 진드기를 내 개체 (특히 키워드 값)의 데이터로 바꾸기를 원합니다. 나는 어떻게 이것을 성취 할 것인가?

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 기능을 설정하는 것입니다 :

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

당신은 폭을 레이블에 맞게 약간 조정할해야 할 수도 있습니다 (또는 rotate them).

이렇게하려면 "적절한"방법은 배열 인덱스 대신 키워드로 xScale 도메인 값을 지정하는 것입니다. 그렇다면 xScale을 사용하는 다른 모든 코드도 변경해야합니다.

Answer 2

이것을 서수 축이라고합니다. 체크 아웃 the example from the creator