D3.js图表​​：标签（< text>标签）在IE11上不显示 [英] D3.js Chart: Labels (<text> Tags) Not Showing On IE11

问题描述

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

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

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

• 点击/右键点击图表上的
• 
  
• 将鼠标悬停在某个栏上（触发我设置显示的工具提示）


• 调整窗口大小






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





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





EDIT：在我看来，这是一个预先存在的问题。请参见





编辑3：但另一个问题，似乎我原来的想法是正确的：它是

解决方案

这可能是一个愚蠢的工作，但已考虑运行功能，点击图表或给予注意？





我曾经需要一个对象的基本状态类为非活动状态，但是我也希望第一个实例处于活动状态。这是一个恼人的，所以我只是做了一个小的功能，只使用一次点击并更改为活动加载，但实例后，基地被设置为非活动。





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




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.

解决方案

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.

这篇关于D3.js图表​​：标签（< text>标签）在IE11上不显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！