D3 добавить HTML не работает в пограничном браузере
У меня есть диаграмма, созданная с использованием d3, мне нужно использовать некоторый HTML, внутри которого прекрасно работает в Chrome, но Edge не отображает HTML, и я не знаю почему.
Вот JSFiddle, который показывает проблему, работает в Chrome не в краю ..
Вот код в скрипке:
<!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>
Я также попробовал:
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;
});