d3.js Określ tekst dla osi X

Question

Moja oś X ma obecnie ponumerowane znaczniki. Chcę, aby tyrysy zostały zastąpione danymi z mojego obiektu (w szczególności wartością słowa kluczowego). Jak to osiągnąć?

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

Najprostszym sposobem osiągnięcia tego celu jest ustawić funkcję tickFormat dla osi:

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

Być może trzeba dostosować Szerokość a trochę dopasowując go do etykiet (lub rotate them).

"Właściwym" sposobem na to byłoby określenie wartości domeny dla ciebie xScale jako słów kluczowych zamiast indeksów tablicy. Wtedy musiałbyś zmienić cały inny kod, który używa także xScale.

Answer 2

Nazywa się to rzędną porządkową, sprawdź the example from the creator