エッジがスケーリングとテキストアンカーを処理しない：svgで正しく中間

Question

D3を使用してグラフ表示プログラムを作成していて、Microsoft Edgeがエッジスケーリングを正しく処理できないという問題が見つかりました。私のコードは以下の通りです：

HTML：

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

    </g> 
</svg> 

JS：Google Chromeの、IE、およびFirefoxで

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

、期待どおりに作品をズーム。ただし、Microsoft Edgeでこのコードを実行すると、ノードの上にあるテキストラベルがズームすると右に移動し、四角形を離れるときに完全に消えます。 text-anchorを設定しないと問題が解消されますが、これは手動でテキストの位置を考慮する必要があることを意味します。特にサイトが国際的に使用されている場合は考慮してください。 （テキスト文字自体は、最終製品のカスタムフォントからのものなので、問題はありません）。

この問題を回避するにはどうすればいいですか？センタリングされたテキストラベルを提供しても、Edgeで正しく表示されますか？

Answer 1

テキストのレイアウトで数回ブラウザの非互換性がある、類似の状況にありました。 CSSプロパティの魔法の組み合わせが見つからない場合は、他の選択肢もあります：

あなたのページに<pre>要素を追加してください。この要素は定義上不可視です。 D3のselectの要素を選択します。レイアウトするテキストをinnerHTMLとして追加します。 classedとstyleを使用して、テキストをスタイルするのとまったく同じ方法で要素をスタイルします。ブラウザの関数getComputedTextLengthを使用するか、要素の寸法を読み取って、テキストの正確な長さを取得できるようになりました。

このすべてを便利な再利用関数またはTextLengthCalculatorクラスで非表示にします。

寸法を取得したら、希望のオフセットを自分で計算し、そのxとy属性を調整するだけでテキストをシフトすることができます。

これは高速で、ローカリゼーションとスタイリングを考慮しています。それはまだそれが計算を行うブラウザ自体であるので、きれいで信頼できるものでもあります。ブラウザはまだ異なる結果を出すことがありますが、少なくとも各ブラウザは独自の計算結果と一致しています。