javascript - D3.js 图表 : Labels (<text> Tags) Not Showing On IE11

Question

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

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

图表的文本实际上确实加载了，但只有在我与之交互之后。如果我执行以下任何操作...

• 单击/右键单击图表上的任意位置
• 将鼠标悬停在一个栏上(这会触发我设置的工具提示出现)
• 调整窗口大小

...图例和轴上的图表标签均出现。

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

编辑: 在我看来，这是一个预先存在的问题。参见 here和 here .

更新:我不得不更改它在页面上的放置位置(我没有编辑 CSS 或 JS)，现在标签在加载时显示，但当其他任何内容发生变化时标签消失窗口(例如，完全不相关的事件被触发，窗口大小重新调整等)。和之前一样，如果我以任何可能的方式与它互动，标签就会再次出现。更改了问题标题以反射(reflect)这一点。

长话短说:

移动前:

• 隐藏加载
• 在受到关注(例如点击)时显示

移动后:

• 已加载
• 在调整窗口大小时隐藏
• 在受到关注(例如点击)时显示
• 从第 2 步开始重复

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

编辑 2:这是这个该死的图表在得到它想要的关注后的样子。

编辑 3: 然而 another question ，看来我最初的想法是对的:它是 viewbox这就是造成这种情况的原因。

Answer 1

这可能是一个愚蠢的解决方法，但是否考虑过运行一个函数来“点击”图形或给予它关注？

我曾经需要一个对象的基状态类处于非事件状态，但我也希望第一个实例处于事件状态。这有点烦人，所以我只做了一个小功能，只用了一次点击并在加载时更改为事件状态，但在那之后实例被设置为非事件状态。

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