Edge non gestisce ridimensionamento e ancoraggio del testo: medio correttamente in svg

Question

Sto scrivendo un programma di visualizzazione di grafici usando D3 e ho trovato un problema in cui Microsoft Edge non gestisce correttamente il ridimensionamento dei bordi. Il mio codice è qui sotto:

HTML:

<svg id="container" width="200" height="200"> 
    <g id="inner-container"> 

    </g> 
</svg> 

JS:

var container = d3.select("#container"); 
var innerContainer = container.select("g"); 
container.call(d3.behavior.zoom().scaleExtent([.5,4]).on("zoom", function(){ 
    innerContainer.attr("transform", "translate(" + d3.event.translate + ") scale(" + d3.event.scale + ")"); 
})); 

var nodes = innerContainer.append("g").selectAll(".graph-node"); 
var labels = innerContainer.append("g").selectAll(".graph-label"); 

var data = ["A", "B", "C", "D", "E"]; 

nodes.data(data).enter().call(function (selection){ 
    selection = selection.append("g"); 
    selection.attr("class", ".graph-node"); 
    selection.attr("transform", function(d, i){ 
    return ["translate(", (i * 20).toString(), " ", (i * 20).toString(), ")"].join(""); 
    }); 
    selection.append("rect") 
    .attr("width", 20) 
    .attr("height", 20) 
    .attr("rx", 2).attr("ry", 2) 
    .attr("fill", "red"); 
    selection.append("text") 
    .text(function(d){ return d; }) 
    .attr("text-anchor", "middle") 
    .attr("x", 10).attr("y", 15) 
    .style("fill", "white"); 
}); 
labels.data(data).enter().call(function (selection){ 
    selection = selection.append("g"); 
    selection.attr("class", "graph-label"); 
    selection.append("text") 
    .text(function (d) { return "Node" + d; }); 
    selection.attr("transform", function (d, i) { 
    return ["translate(", (i * 20 + 25).toString(), " ", (i * 20 + 15).toString(), ")"].join(""); 
    }); 
}); 

View in JSFiddle

In Google Chrome, IE e Firefox, lo zoom funziona esattamente come previsto. Tuttavia, quando eseguo questo codice in Microsoft Edge, le etichette di testo sopra i nodi si sposteranno a destra mentre eseguo l'ingrandimento, scomparendo completamente quando lasciano il rettangolo. Il problema scompare quando non ho impostato text-anchor, ma ciò significa che devo tenere conto del posizionamento del testo manualmente, soprattutto considerando quando il sito è utilizzato a livello internazionale. (I caratteri di testo non hanno importanza, dal momento che provengono da un carattere personalizzato nel prodotto finale).

Come posso aggirare questo, fornendo un'etichetta di testo centrata e tuttavia averla ancora visualizzata correttamente su Edge?

Answer 1

Sei stato in situazioni simili con incompatibilità del browser nel layout del testo più volte. Se non riesci a trovare la combinazione magica di proprietà CSS che funziona per tutti, ecco un'altra opzione:

Aggiungi un elemento <pre> alla tua pagina. Questo elemento è invisibile per definizione. Seleziona l'elemento con D3 select. Aggiungi il testo che vuoi impaginare come innerHTML. Usa classed e style per modellare l'elemento esattamente nello stesso modo in cui modificherai il testo. Ora puoi ottenere la lunghezza esatta del testo con la funzione browser getComputedTextLength o leggendo le dimensioni dell'elemento.

Nascondere tutto ciò in una comoda funzione di riutilizzo o in una classe TextLengthCalculator.

Una volta ottenute le dimensioni, è possibile calcolare autonomamente le compensazioni desiderate e spostare semplicemente il testo regolando gli attributi x e y.

Questo è veloce e tiene conto della localizzazione e dello stile. È anche pulito e affidabile poiché è il browser stesso che esegue il calcolo. E sebbene i browser a volte producano risultati diversi qui, almeno ogni browser è coerente con il proprio calcolo.