I have a chart created using d3 that I need to use some HTML inside of which works fine in Chrome but edge does not display the HTML and I don't know why.
Here is a JSFiddle that shows the issue, works in Chrome does not in edge..
Here is the code in fiddle:
<!DOCTYPE html>
<body>
<div id="chart"></div>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>
(function(d3) {
'use strict';
var dataset = [
{ label: 'Abulia', count: 10 },
{ label: 'Betelgeuse', count: 20 },
{ label: 'Cantaloupe', count: 30 },
{ label: 'Dijkstra', count: 40 }
];
var width = 360;
var height = 360;
var radius = Math.min(width, height) / 2;
var color = d3.scale.category20b();
var svg = d3.select('#chart')
.append('svg')
.attr('width', width)
.attr('height', height)
.append('g')
.attr('transform', 'translate(' + (width / 2) +
',' + (height / 2) + ')');
var arc = d3.svg.arc()
.outerRadius(radius);
var pie = d3.layout.pie()
.value(function(d) { return d.count; })
.sort(null);
var path = svg.selectAll('path')
.data(pie(dataset))
.enter()
.append('path')
.attr('d', arc)
.attr('fill', function(d, i) {
return color(d.data.label);
});
svg.append("text")
.attr('y', 0)
.attr('x', 100)
.data(['some text'])
.attr("text-anchor", "middle")
.attr('font-size', '20px')
.attr('font-weight', 'bold')
.attr('fill', 'white')
.text(function(d) {
return d;
});
svg.append("text")
.attr('y', 0)
.attr('x', -100)
.data(['some html °'])
.attr("text-anchor", "middle")
.attr('font-size', '20px')
.attr('font-weight', 'bold')
.attr('fill', 'white')
.html(function(d) {
return d;
});
})(window.d3);
</script>
</body>
I have also tried:
svg.append("foreignObject")
.attr('y', 0)
.attr('x', -100)
.data(['some html °'])
.attr("text-anchor", "middle")
.attr('font-size', '20px')
.attr('font-weight', 'bold')
.attr('fill', 'white')
.attr('width', width)
.attr('height', height)
.html(function(d) {
return d;
});
As per Q/A here
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
