Tworzenie osi X z etykietą ze skalą porządkową w D3.js

Question

Buduję wykres słupkowy w d3.js z porządkową osią X, której znaczniki powinny oznaczać wykres tekstem. Czy ktokolwiek może wyjaśnić, w jaki sposób skala porządkowa "mapuje" x tyknięcia do odpowiednich pozycji paska? W szczególności, jeśli chcę wyznaczyć etykiety x tick z tablicą wartości tekstowych do odpowiednich słupków na wykresie słupkowym.

Obecnie jestem ustawienie domeny jak:

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) 

Jednak wartości 1-19 są wyświetlane po etykiet tekstowych.

Jak widać w tym skrzypce:

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

Associated Fiddle Kod źródłowy:

//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

Można ustawić wartości podziałki na osi porządkowej jawnie przy użyciu d3.svg.axis().tickValues(*array*).

Ale to jest dziwny sposób, aby to zrobić, ponieważ niebezpiecznie oddziela klucze i wartości, co oznacza, że ​​musisz zadbać o ręczne wyrównanie skal i upewnić się, że dane odpowiadają poprawnie. Pomaga grupie klucze i wartości w jednym obiekcie, a następnie użyć formatu:

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

mapowania domen osi.

Przebudowałem twoje dane i skrzypię, aby zrobić to w tym, co widzę jako bardziej d3 way. (Zwróć także uwagę, że wprowadziłem kilka innych zmian dla zabawy, mianowicie poprawiłem marginesy i wyczyściłem wyrównanie osi, itp.).