ie使用d3的html方法无效,html - D3 svg chart can't display in IE - Stack Overflow

I'm building a website which contains d3 svg to display the bar chart. It can display in Chrome, Firefox, Edge, Safari, but it is not working in IE. I have tried to use canvas method, but it is not working. Then I tried set viewbox for svg, but it is not working as well. Could anyone help me solve this problem?

Here's my d3.js and html code

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 "" + d.value + "";

})

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