D3 svg图表无法在IE中显示

Posted 2023-03-28

【中文标题】D3 svg图表无法在IE中显示

【英文标题】：D3 svg chart can't display in IE

【发布时间】：2020-08-24 07:27:22

【问题描述】：

我正在构建一个包含 d3 svg 来显示条形图的网站。它可以在 Chrome、Firefox、Edge、Safari 中显示，但在 IE 中不起作用。我曾尝试使用画布方法，但它不起作用。然后我尝试为 svg 设置视图框，但效果不佳。谁能帮我解决这个问题？ 这是我的 d3.js 和 html 代码

function homeStats() 
    var jsonobj = document.getElementById('stats-data').value;
    var data = JSON.parse(jsonobj);
    var parentDiv = document.getElementById("home-stats");

    function drawbar() 
        var margin =  top: 40, right: 20, bottom: 100, left: 40 ;
        var width = parentDiv.clientWidth - margin.left - margin.right;
        var height = parentDiv.clientHeight - margin.top - margin.bottom;
        var tip = d3.tip()
            .attr('class', 'd3-tip')
            .offset([-10, 0])
            .html(function (d) 
                return "<span style='color:white'>" + d.value + "</span>";
            )
        d3.selectAll('#home-stats-svg').remove()
        var svg = d3.select("#home-stats").append("svg").attr("id", "home-stats-svg")
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom)
            .append("g")
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

        svg.call(tip);

        var x0 = d3.scale.ordinal()
            .rangeRoundBands([0, width], .65);

        var x1 = d3.scale.ordinal();

        var y = d3.scale.linear()
            .range([height, 0]);

        var color = d3.scale.ordinal()
            .range(["#f79944", "#20b5e1"]);

        var xAxis = d3.svg.axis()
            .scale(x0)
            .orient("bottom");

        var yAxis = d3.svg.axis()
            .scale(y)
            .orient("left")


        var columnNames = d3.keys(data[0]).filter(function (key)  return key !== "Year"; );

        data.forEach(function (d) 
            d.subGroups = columnNames.map(function (name)  return  name: name, value: +d[name] ; );
        );

        x0.domain(data.map(function (d)  return d.Year; ));
        x1.domain(columnNames).rangeRoundBands([0, 30]);
        y.domain([0, d3.max(data, function (d)  return d3.max(d.subGroups, function (d)  return d.value; ); )]);

        svg.append("g")
            .attr("class", "x axis")
            .attr("transform", "translate(0," + height + ")")
            .call(xAxis);

        svg.append("g")
            .attr("class", "y axis")
            .call(yAxis)
            .append("text")
            .attr("transform", "rotate(-90)")
            .attr("y", 6)
            .attr("dy", ".71em")
            .style("text-anchor", "end");

        const rx = 5;
        const ry = 5;

        var Year = svg.selectAll(".Year")
            .data(data)
            .enter().append("g")
            .attr("class", "Year")
            .attr("transform", function (d)  return "translate(" + x0(d.Year) + ",0)"; );

        Year.selectAll("rect")
            .data(function (d)  return d.subGroups; )
            .enter().append("path")
            .style("fill", function (d)  return color(d.name); )
            .attr("d", item => `
                        M$x1(item.name),$y(item.value) + ry
                        a$rx,$ry 0 0 1 $rx,$-ry
                        h$10 - 2 * rx
                        a$rx,$ry 0 0 1 $rx,$ry
                        v$height - y(item.value) - ry
                        h$-(10)Z
                      `)
            .on('mouseover', tip.show)
            .on('mouseout', tip.hide);

        var legend = svg.selectAll(".legend")
            .data(columnNames.slice().reverse())
            .enter().append("g")
            .attr("class", "legend")
            .attr("transform", function (d, i)  return "translate(0," + i * 20 + ")"; );

        legend.append("rect")
            .attr("x", width - 5)
            .attr("width", "1vw")
            .attr("height", "2vh")
            .style("fill", color);

        legend.append("text")
            .attr("x", width - 7)
            .attr("y", 9)
            .attr("dy", ".35em")
            .style("text-anchor", "end")
            .text(function (d)  return d; );

    

    drawbar();

HTML

<div id="home-stats" style="height:50vh; width:45vw">
        <input type="hidden" id="stats-data" value=@ViewBag.deaths_json />
        <svg id="home-stats-svg" viewBox="0 0 100 100"></svg>
</div>

【问题讨论】：

你用的是什么版本的D3.js，什么版本的IE？我直接注意到的一件事是您使用的模板文字和箭头语法与 IE 不兼容。检查caniuse.com 以了解更具体的与 JS 相关的兼容性问题，这些问题可能不依赖于 D3.js

感谢回复，我用的是d3的V3和IE11

您好 Arvin，您是否已将代码更新为不使用 ES6，因为大多数 ES6 功能与 IE 不兼容？进行这些更改后，请更新您的问题。

嗨 Coola，感谢您的帮助。我只是尝试使用babeljs.io 将 ES6 转换为 ES2015，然后就可以了！！顺便说一句，如果有人遇到同样的问题，请尝试这种方法，它可能会奏效。再次感谢！

是的，Babeljs 可以将所有 ES6 转换为跨浏览器兼容。很高兴它对你有用。

【参考方案1】：

由于arrow function expression不支持IE浏览器，我们可以使用babeljs.io将此函数转换为ES5格式。