Edge does not handle scaling and text binding: average is correct in svg

Question

I am writing a graph display program using D3, and I found a problem in which Microsoft Edge does not cope with edge scaling. My code is below:

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, and Firefox, scaling works exactly as expected. However, when I run this code in Microsoft Edge, the text labels on top of the nodes will shift to the right when I zoom in, completely disappearing when they leave the rectangle. The problem disappears when I do not install text-anchor , but this will mean that I have to consider the location of the text manually, especially considering when the site is used internationally. (Text characters themselves do not matter, since they are from a custom font in the final product).

How can I get around this by creating a label with the text centered and still saving it correctly on Edge?

Answer 1

In similar situations with browser incompatibility when composing text several times. If you can't find a magical CSS property combination that works for everyone, here's another option:

Add the <pre> element to your page. By definition, this element is invisible. Select an item with D3 select . Add the text you want to place as innerHTML. Use classed and style to style an element in the same way that you style text. Now you can get the exact length of the text using the browser function getComputedTextLength or by reading the sizes of the elements.

Hide it all in a convenient reuse function or in the TextLengthCalculator class.

Once you have the dimensions, you can calculate the necessary offsets yourself and simply shift the text by adjusting its x and y attributes.

It is fast and takes into account localization and style. It is even clean and reliable, as it is still the browser that performs the calculation. And although browsers still sometimes give different results, at least each browser is consistent with its own calculation.