D3附加HTML在边缘浏览器中不起作用 [英] D3 append HTML not working in edge browser
问题描述
我有一个使用d3创建的图表，我需要使用一些HTML里面的工作正常在Chrome，但边缘不显示HTML，我不知道为什么。
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.
这是一个显示问题的JSFiddle ，在Chrome中不能使用。
Here is a JSFiddle that shows the issue, works in Chrome does not in edge..
以下是fiddle中的代码：
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>
我也尝试过：
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
推荐答案
有两个错误实际上打破了包含度符号的文本的输出。第一个是使用 selection.html（） 不用于SVG内容：
There are two errors actually breaking the output of the text containing the degree sign. The first one is the use of selection.html() which is not to be used for SVG content:
注意：如其名字所示，selection.html仅支持HTML元素。 SVG元素和其他非HTML元素不支持innerHTML属性，因此与selection.html不兼容。
Note: as its name suggests, selection.html is only supported on HTML elements. SVG elements and other non-HTML elements do not support the innerHTML property, and thus are incompatible with selection.html.
选择了该方法，因为您想要插入一个HTML实体，即度数符号。由于下面解释的原因，这可以通过其他方式实现，并且使用中的方法可以更改为 .text（）以使用SVG内容。
I suppose you chose that method because you wanted to insert an HTML entity, namely the degree sign. For reasons explained below this can be achieved by other means and the method in use can be changed to .text() to work with SVG content.
第二个错误是使用一个HTML实体（& deg; ），它是没有为SVG定义。或者，您可以使用 Unicode转义序列
The second error is the use of an HTML entity (°) which is not defined for SVGs. As an alternative, you can use the Unicode escape sequence \u00b0 for your degree sign.
svg.append("text")
// ...
.data(['some html \u00b0']) // Use Unicode escape sequence instead of HTML entity
// ... .attr("", "")
.text(function(d) { // Use .text() instead of .html()
return d;
});
查看更新的 JSFiddle 。
您的初始方法实际上应该在没有浏览器，因为它是基于对DOM节点的不当fiddling。然而，Chrome，FF和其他一些似乎有点更放松，而IE是正确的。
Your initial approach should actually work in no browser at all, because it is based on improper fiddling with DOM nodes. However, Chrome, FF and some others seem to be a bit more relaxed about it, while IE got it right.
这篇关于D3附加HTML在边缘浏览器中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
