web-dev-qa-db-fra.com

d3.js Spécifie le texte pour l'axe des x

Mon axe des abscisses a actuellement des ticks numérotés. Je souhaite que les ticks soient remplacés par les données de mon objet (en particulier la valeur mot clé). Comment pourrais-je accomplir ceci?

J'ai un travail 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");
javascriptd3.jsaxis-labels
14
EnigmaRM

Pour ce faire, le moyen le plus simple consiste à définir la fonction tickFormat pour votre axe:

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

Vous devrez peut-être ajuster légèrement la largeur pour adapter les étiquettes (ou les faire pivoter ).

La manière "appropriée" de le faire serait de spécifier les valeurs de domaine pour vous xScale en tant que mots-clés au lieu des index de tableau. Ensuite, vous devrez également changer tout le code qui utilise xScale.

36
Lars Kotthoff

C'est ce qu'on appelle un axe ordinal, consultez l'exemple du créateur

1
mdubez