Creazione di un'asse x dell'etichetta con una scala ordinale in D3.js

Question

Sto costruendo un grafico a barre in d3.js con un asse x ordinale i cui segni di spunta dovrebbero etichettare il grafico con il testo. Qualcuno potrebbe spiegare in che modo la scala ordinale "mappa" i segni di spunta alle posizioni corrispondenti della barra? In particolare, se desidero designare le etichette delle tacche x con una serie di valori di testo sulle barre corrispondenti in un grafico a barre.

Attualmente sto impostando il dominio come il seguente:

var labels = ["a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t"]; 
    var xScale = d3.scale.ordinal() 
       .domain(labels) 

Tuttavia, i valori di 1-19 stanno mostrando dopo le etichette di testo.

Come si è visto in questo violino:

http://jsfiddle.net/chartguy/FbqjD/

Associated Source Code Fiddle:

//Width and height 
      var margin = {top: 20, right: 20, bottom: 30, left: 40};   
      var width = 600 - margin.left - margin.right; 
      var height= 500-margin.top -margin.bottom; 
      var w = width; 
      var h = height; 


      var dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13, 
          11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ]; 

      var labels = ["a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t"]; 
      var xScale = d3.scale.ordinal() 
      .domain(labels) 
          .rangeRoundBands([margin.left, width], 0.05); 
      var xAxis = d3.svg.axis().scale(xScale).orient("bottom"); 


      var yScale = d3.scale.linear() 
          .domain([0, d3.max(dataset)]) 
          .range([h,0]); 


      //Create SVG element 
      var svg = d3.select("body") 
         .append("svg") 
         .attr("width", w) 
         .attr("height", h); 

      //Create bars 
      svg.selectAll("rect") 
       .data(dataset) 
       .enter() 
       .append("rect") 
       .attr("x", function(d, i) { 
        return xScale(i); 
       }) 
       .attr("y", function(d) { 
        return yScale(d); 
       }) 
       .attr("width", xScale.rangeBand()) 
       .attr("height", function(d) { 
        return h - yScale(d); 
       }) 
       .attr("fill", function(d) { 
        return "rgb(0, 0, 0)"; 
       }); 

      svg.append("g") 
     .attr("class", "x axis") 
     .attr("transform", "translate(0," + 0 + ")") 
     .call(xAxis); 

      //Create labels 
      svg.selectAll("text") 
       .data(dataset) 
       .enter() 
       .append("text") 
       .text(function(d) { 
        return d; 
       }) 
       .attr("x", function(d, i) { 
        return xScale(i) + xScale.rangeBand()/2; 
       }) 
       .attr("y", function(d) { 
        return h - yScale(d) + 14; 
       }); 

Answer 1

È possibile impostare i valori di graduazione di un asse ordinale esplicitamente utilizzando d3.svg.axis().tickValues(*array*).

Ma questo è un modo strano per farlo perché separa pericolosamente le tue chiavi e i tuoi valori, il che significa che devi fare attenzione ad allineare manualmente le scale e assicurarti che i tuoi dati corrispondano correttamente. Aiuta a raggruppare chiavi e valori in un singolo oggetto e quindi usa il formato:

 axis.domain(array.map(function (d) { return d.value; })) 

per mappare i domini degli assi.

Ho rielaborato i dati e il violino per farlo in quello che vedo più d3 way. (Si noti inoltre che ho apportato alcune altre modifiche solo per divertimento, ovvero migliorato i margini e ripulito l'allineamento degli assi, ecc.)