D3.js IE vs Chrome SVG未显示

Question

我有一个简单的D3 donut diagram，其中有一个.mouseover（）事件，用于更新在圆环孔中心的SVG：文本元素。它的伟大工程......

直到我遇到用户使用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

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

Answer 2

这不是不清楚是什么原因造成的问题，但是设置.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工作，所以我可能会发现这已经被讨论过了。

Answer 3

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