d3.js x-axis

Question

के लिए टेक्स्ट निर्दिष्ट करें मेरे एक्स-अक्ष में वर्तमान में संख्याएं हैं। मैं चाहता हूं कि टिक को मेरी ऑब्जेक्ट से डेटा के साथ प्रतिस्थापित किया जाए (विशेष रूप से कीवर्ड मान)। मैं इसे कैसे पूरा करूं?

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

आप चौड़ाई लेबल फिट करने के लिए एक सा tweak करना पड़ सकता है (या rotate them)।

ऐसा करने का "उचित" तरीका आपके लिए xScale डोमेन मानों को सरणी सूचकांक के बजाय कीवर्ड के रूप में निर्दिष्ट करना होगा। फिर आपको अन्य सभी कोडों को बदलना होगा जो xScale का उपयोग करते हैं।

Answer 2

इसे एक सामान्य अक्ष कहा जाता है, the example from the creator