D3.js IE 与 Chrome SVG 未显示

Question

我有一个简单的D3 donut diagram，它带有一个 .mouseover() 事件，用于更新甜甜圈孔中心的 SVG:text 元素。效果很好……

直到我遇到使用 IE 9、10 和 11 的用户。这些浏览器不会呈现中心标签。有没有办法适应 IE 并在两个浏览器中显示中心标签？

HTML 页面基于HTML5BoilerPlate，并带有各种垫片以检测旧浏览器。

D3 script 看起来很简单。

    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);
                })

Answer 1

我遇到了同样的问题，innerSvg polyfill 帮助了我。现在 SVG 中的 html() 可以在 IE 中使用。

Answer 2

目前尚不清楚导致问题的原因，但设置 .text 属性可以在使用 Fiddler 测试后解决问题：

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 工作，所以我可能会发现这已经被讨论过了。

Answer 3

将所有 .html 调用替换为 .text 调用。一般来说，innerHTML 是用于 HTML 的东西，尽管浏览器正在为它提供 SVG 支持，因为每个人都期待它能够工作。