D3.js IE与Chrome中SVG未显示问题

Question

我有一个简单的D3甜甜圈图，其中包含一个.mouseover()事件，该事件会更新位于甜甜圈孔中心的SVG:text元素。它运行良好...直到我遇到IE 9、10和11用户。这些浏览器无法呈现中心标签。是否有一种方法来适应IE并在两个浏览器中显示中心标签？

HTML页面基于HTML5BoilerPlate，具有各种检测旧浏览器的shim。 D3脚本似乎相当简单。

    d3.json("data/census.php", function(error, dataset) { 
    var h = 220,  w = 295;
    var outerRadius = h / 2, innerRadius = w / 4;
    var color = d3.scale.category20b();
    var svg= d3.select("#dailycensus")
                .append("svg")
                .data([dataset])
                .attr("width", w)
                .attr("height", h) 
                .append("svg:g")
                .attr("transform", "translate(" + outerRadius + "," + outerRadius + ")");

    var arc = d3.svg.arc()
                .innerRadius(innerRadius)
                .outerRadius(outerRadius);

    var pie = d3.layout.pie()
                .value(function(d,i) { return +dataset[i].Census; });

    var arcs = svg.selectAll("g.slice")
                .data(pie)
                .enter()
                .append("svg:g")
                .attr("class", "slice");

    var syssum = d3.sum(dataset, function(d,i) { return +dataset[i].Census; });

    var tip = d3.tip()
                .attr("class", "d3-tip")
                .html(String);

    var formatter = d3.format(".1%");

    svg.append("text")
            .attr("id", "hospital")
            .attr("class", "label")
            .attr("y", -10)
            .attr("x", 0)
            .html("Health System Census"); // Default label text
    svg.append("text")
            .attr("id", "census")
            .attr("class", "census")
            .attr("y", 40)
            .attr("x", 0)
            .html(syssum); // Default label value

    arcs.append("svg:path")
        .call(tip) // Initialize the tooltip in the arc context
        .attr("fill", function(d,i) { return color(i); }) // Color the arc
        .attr("d", arc)
        .on("mouseover", function(d,i) {
                tip.show( formatter(dataset[i].Census/syssum) );
// Update the doughnut hole label with slice meta data 
                svg.select("#hospital").remove();
                svg.select("#census").remove();
                svg.append("text")
                    .attr("id", "hospital")
                    .attr("class", "label")
                    .attr("y", -10)
                    .attr("x", 0)
                    .html(dataset[i].Facility);
                svg.append("text")
                    .attr("id", "census")
                    .attr("class", "census")
                    .attr("y", 40)
                    .attr("x", 0)
                    .html(+dataset[i].Census);
                })

        .on("mouseout", function(d) { 
                tip.hide();
// Return the doughnut hole label to the default label
                svg.select("#hospital").remove(); 
                svg.select("#census").remove();
                svg.append("text")
                    .attr("id", "hospital")
                    .attr("class", "label")
                    .attr("y", -10)
                    .attr("x", 0)
                    .html("Health System Census");
                svg.append("text")
                    .attr("id", "census")
                    .attr("class", "census")
                    .attr("y", 40)
                    .attr("x", 0)
                    .html(syssum);
                })

- Colin

---

用 .text 替换 .html 是否可以解决这个问题？ - Robert Longson

嗯...有趣。根据BrowserStack的说法，似乎这个方法可以奏效。我明天再测试一下。奇怪的是，.html文件似乎可以用于工具提示，但不能用于中心标签。如果你想将此作为答案提交，我会接受的。谢谢！（更新：但如果你拥有超过25,000声望和SVG子系统的同行评审员身份，我不确定你是否需要它！ :-) - Colin

Answer 1

将所有的 .html 调用替换为 .text 调用。通常 innerHTML 用于 HTML 事物，尽管浏览器正在为其提供 SVG 支持，因为每个人都希望它能正常工作。

- Robert Longson

---

好的，这在IE中几乎可以工作 - 文本正在添加到元素中，但所有的<和>都被HTML转义字符（<和>）替换了。 - Kreozot

我使用了innerSVG polyfill，现在html()在IE中可以工作了！ - Kreozot

Answer 2

我曾经遇到同样的问题，使用innerSvg polyfill解决了它。现在在IE中，SVG内的html()函数可以正常工作。

- Kreozot

---

你能发一个例子吗？ - Sandro Antonucci

对于现在遇到Google Code基本上无法使用的其他人 - 你需要npm / yarn安装innersvg-polyfill，然后导入/需要它。例如，在webpack上import * as innerSVG from 'innersvg-polyfill';。 - constancecchen

Answer 3

目前还不清楚是什么原因导致了这个问题，但在使用Fiddler测试后，将.text属性进行设置可以解决这个问题：

svg.append("text")
    .attr("id", "hospital")
    .attr("class", "label")
    .attr("y", -10)
    .attr("x", 0)
    .text(dataset[i].Facility);
svg.append("text")
    .attr("id", "census")
    .attr("class", "census")
    .attr("y", 40)
    .attr("x", 0)
    .text(+dataset[i].Census);
})

在开发者工具中直接调查<text />元素后，您会发现设置.innerHTML属性不会呈现您期望的结果，但是.textContent会。

如果这在Chrome和Firefox中都按预期工作，我很乐意为IE团队打开一个互操作性错误。我们最近一直在做SVG工作，所以我可能会发现这已经被讨论过了。

- Sampson