D3 SVG图表无法在IE中显示

Question

我正在建立一个包含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" [email protected]_json />
        <svg id="home-stats-svg" viewBox="0 0 100 100"></svg>
</div>

Answer 1

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