D3.js IE vs Chrome SVG没有显示

Question

我有一个带有.mouseover()事件的简单D3圆环图,它更新了圆环孔中心的SVG:文本元素.它很棒......

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

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

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

Answer 1

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