D3.js Chart: Labels (<text> Tags) Not Showing On IE11

Question

I have a stacked bar chart whose <text> labels will not show on IE, but will on Chrome and Firefox.

The labels I have on the stacked bar charts are part of the axes and the legend. This is how it looks like when the page loads.

The chart's text actually does load, but only after I interact with it. If I do any of the following...

• click/right-click anywhere on the chart
• hover over a bar (which triggers a tooltip I've set up to appear)
• resize the window

... the chart's labels on both the legend and the axis appear.

I am using viewbox, which may be the issue here, as I know there's some black magic that happens when viewbox and IE are put into the same pot.

EDIT: It seems to me that this is a pre-existing issue. See here and here.

UPDATE: I had to change where it was placed on the page (I did not edit the CSS or the JS), and now the labels show on load but disappear when anything else changes on the window (e.g. completely unrelated event being triggered, window is re-sized etc.). As it was earlier, if I interact with it in any way possible, the labels appear again. Changed the question title to reflect this.

TL;DR:

Before move:

• hidden onload
• shown when given attention (e.g. clicked)

After move:

• shown onload
• hidden when window is resized
• shown when given attention (e.g. clicked)
• repeat from step 2

Just to avoid confusion, the chart's labels do not hide if I click it after they're already shown, IE seems to get quickly bored of playing peekaboo. However, if I resize the window or change something else on the page, it gets angry for me giving attention to something else and hides the labels again until I click on it or hover over a bar.

EDIT 2: Here's what this cursed chart looks like when given the attention it desires.

EDIT 3: Yet another question, and it seems my original thought was right: it is the viewbox that's causing this.

Answer 1

This may be a dumb work around, but have considered running a function that "clicks" the graph or gives it attention?

I once needed a base state class of an object to be inactive, however I also wanted the first instance to be active. It was sort of annoying, so I just made a small function that was used just once to click and change to active on load, but instance after that the base was set to inactive.

I would consider doing a similar thing to the graph, it shouldn't effect any of the other browsers since they are loading in the right format anyway.

Answer 2

In case anyone is still suffering with this issue, I've come across a solution that works in many cases.

If the width of the svg element changes, IE will repaint the SVG element, which will correct a misplaced element. If the svg is set to 100% of its container div's width through the style attribute, a negligible change to the svg's width will not be visibly obvious, but is enough to repaint.

The width (and height) of the enclosing element can be used to set the svg's desired dimensions.

// HTML
<div class="container">
  <svg id="mySVG"></svg>
</div>

// JS
var svgEl = document.getElementById( 'mySVG' )
svgEl.style.width = '99.9%' // can be any % other than that initially set on the svg