Etichette di testo asse grafico a linee D3 in linea multipla

Question

I have a line chart built in d3.js. Avevo bisogno di aiuto con alcune personalizzazioni. Sto cercando di dividere le etichette di testo sull'asse x in due righe. Voglio la data in una riga e il mese in un'altra.

Il grafico presente ha "14 Dec" in una riga.

La presente tabella:

Le etichette di asse x è diviso in 2 righe qui. Data e mese in 2 linee diverse.

Previsto asse x:

Codepen link

 var xScale = d3.time.scale().domain([data[0][xkeyVal], data[data.length - 1][xkeyVal]]).range([margin.left, width]); 

     var yScale = d3.scale.linear().domain([0, d3.max(data, function(d) { 
        return d[ykeyVal]; 
       })]).range([height, margin.left]); 

     var xAxisGen = d3.svg.axis() 
        .scale(xScale) 
        .orient("bottom") 
        .ticks(_config.keys.xAxis.ticks) 
        .tickFormat(d3.time.format("%d %b")) 
        .tickSize(0); 

     var yAxisGen = d3.svg.axis() 
       .scale(yScale) 
       .orient("left") 
       .tickValues(_config.keys.yAxis.tickValues.length > 0 ? _config.keys.yAxis.tickValues : 1) 
     .tickSize(0); 

Answer 1

lo farei dopo aver generato l'asse:

 svg.append("svg:g") 
      .attr("class", "x axis") 
      .attr("transform", "translate(0," +height + ")") 

      .call(_config.xAxisGen) 
      .selectAll('.x .tick text') // select all the x tick texts 
      .call(function(t){     
      t.each(function(d){ // for each one 
       var self = d3.select(this); 
       var s = self.text().split(' '); // get the text and split it 
       self.text(''); // clear it out 
       self.append("tspan") // insert two tspans 
       .attr("x", 0) 
       .attr("dy",".8em") 
       .text(s[0]); 
       self.append("tspan") 
       .attr("x", 0) 
       .attr("dy",".8em") 
       .text(s[1]); 
      }) 
     }); 

aggiornato example.