Question

我有一个带有.mouseover（）事件的简单D3 donut diagram，用于更新圆环孔中心的SVG：text元素。它很棒...

enter image description here

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

enter image description here

HTML页面基于HTML5BoilerPlate，其中包含用于检测旧浏览器的各种填充程序。

    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

用.text调用替换所有.html调用。一般来说，innerHTML是针对HTML的东西，虽然浏览器正在为它提供SVG支持，因为每个人都希望它能够工作。

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

我有同样的问题，innerSvg polyfill帮助了我。现在SVG中的html（）在IE中运行。

D3.js IE vs Chrome SVG没有显示

3 个答案: