D3.js图表​​：IE11上未显示的标签（<text>标签）

Question

我有一个堆积条形图，其<text>标签不会在IE上显示，但会在Chrome和Firefox上显示。

堆积条形图上的标签是轴和图例的一部分。这就是页面加载时的样子。

图表的文本实际上会加载，但只有在我与它交互后才会加载。如果我做以下任何一个......

• 点击/右键点击图表上的任何位置
• 将鼠标悬停在某个条形图上（触发我设置为显示的工具提示）
• 调整窗口大小

...图例上的图标标签出现在。

我正在使用 viewbox ，这可能是这里的问题，因为我知道当将viewbox和IE放入同一个底池时会发生一些黑魔法。

编辑：在我看来，这是一个已存在的问题。请参阅here和here。

更新：我不得不更改它在页面上的位置（我没有编辑CSS或JS），现在标签显示加载但是当其他任何更改时消失窗口（例如，触发完全不相关的事件，重新调整窗口大小等）。如前所述，如果我以任何可能的方式与其进行交互，标签将再次出现。更改了问题标题以反映这一点。

TL; DR：

搬家前：

• hidden onload
• 在给予关注时显示（例如点击）

搬家后：

• 显示onload
• 在调整窗口大小时隐藏
• 在给予关注时显示（例如点击）
• 从第2步开始重复

为了避免混淆，图表的标签不会隐藏，如果我在它们已经显示后点击它，IE似乎很快就会玩躲猫猫。但是，如果我调整窗口大小或更改页面上的其他内容，它会让我生气，因为我会注意其他内容并再次隐藏标签，直到我点击它或将鼠标悬停在栏上。

编辑2：以下是这个被诅咒的图表在得到所需关注时的样子。

编辑3：然而another question，似乎我最初的想法是正确的：导致此问题的是viewbox。

Answer 1

这可能是一个愚蠢的工作，但考虑运行一个“点击”＃34;图表还是给予关注？

我曾经需要一个对象的基本状态类处于非活动状态，但我也希望第一个实例处于活动状态。这有点烦人，所以我只做了一个小函数，只用了一次就可以点击并在加载时更改为活动状态，但是后面的实例将基数设置为非活动状态。

我会考虑对图表做类似的事情，它不应该影响任何其他浏览器，因为无论如何它们都以正确的格式加载。

Answer 2

万一仍有人遇到这个问题，我遇到了一种在很多情况下都可以使用的解决方案。

如果svg元素的宽度发生变化，则IE将重新绘制SVG元素，这将更正错误放置的元素。如果通过style属性将该svg设置为其容器div宽度的100％，则该svg宽度的变化几乎可以忽略不计，但足以进行重新绘制。

包围元素的宽度（和高度）可用于设置svg所需的尺寸。

// 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