Impostare l'asse y del grafico d3 per adattarlo all'etichetta più ampia?

Question

Sto disegnando grafici a linee con d3 e tutto funziona correttamente. Tuttavia, devo lasciare un margine sufficiente a sinistra dell'area del grafico per adattarla a qualsiasi altra che ritengo possa essere l'etichetta di testo dell'asse y più ampia. Mi piacerebbe regolare questo spazio per ogni grafico, a seconda dell'etichetta più ampia.

Inizialmente pensavo di trovare il valore massimo di y, creare un oggetto di testo nascosto, calcolare l'ampiezza e utilizzare quel valore per il margine sinistro durante la creazione del grafico. Un po 'brutto, ma mi dà un valore.

Tuttavia, se il valore massimo di y è, diciamo "1598.538", l'etichetta dell'asse y più in alto potrebbe essere "1500" ... cioè molto più stretta.

Quindi immagino di voler trovare la larghezza di quello che sarà effettivamente l'etichetta più in alto. Ma non riesco a pensare a come farlo senza disegnare il grafico e l'asse, misurare quella larghezza e disegnarla di nuovo per davvero. Che sembra brutto! C'è un modo non brutto per farlo?

UPDATE

Ecco la parte del mio codice, utilizzando il suggerimento di Lars', solo per mostrare dove si inserisce in:

// I did have 
// `.attr("transform", "translate(" + margin.left + "," + margin.top ")")` 
// on the end of this line, but I've now moved that to the bottom. 
var g = svg.select("g"); 

// Add line paths. 
g.selectAll(".line").data(data) 
    .enter() 
    .append("path") 
    .attr("d", line); 

// Update the previously-created axes. 
g.select(".axis-x") 
    .attr("transform", "translate(0," + yScale.range()[0] + ")")) 
    .call(xAxis); 
g.select(".axis-y") 
    .call(yAxis); 

// Lars's suggestion for finding the maximum width of a y-axis label: 
var maxw = 0; 
d3.select(this).select('.axis-y').selectAll('text').each(function(){ 
    if (this.getBBox().width > maxw) maxw = this.getBBox().width; 
}); 

// Now update inner dimensions of the chart. 
g.attr("transform", "translate(" + (maxw + margin.left) + "," + margin.top + ")"); 

Answer 1

Si può mettere tutto all'interno di un elemento g e impostare transform sulla base di la larghezza massima. Qualcosa sulla falsariga di

var maxw = 0; 
yAxisContainer.selectAll("text").each(function() { 
    if(this.getBBox().width > maxw) maxw = this.getBBox().width; 
}); 
graphContainer.attr("transform", "translate(" + maxw + ",0)");