下面的代码片段在IE 11中不起作用,它会在控制台中引发语法错误
g.selectAll(".mainBars").append("text").attr("x",d=>(d.part=="primary"? -40: 40)).attr("y",d=>+6).text(d=>d.key).attr("text-anchor",d=>(d.part=="primary"? "end": "start"));
使用d3.js
二分图进行可视化
此代码导致上述语句d=>(d.part=="primary"? -40: 40)
中的问题
你正在使用箭头功能。 IE11不支持它们。请改用function
函数。
这是Babel's对ES5的翻译:
g.selectAll(".mainBars").append("text").attr("x", function (d) {
return d.part == "primary" ? -40 : 40;
}).attr("y", function (d) {
return +6;
}).text(function (d) {
return d.key;
}).attr("text-anchor", function (d) {
return d.part == "primary" ? "end" : "start";
});
如果您需要支持IE 11作为it is not supported,请避免使用箭头功能
将它们更改为常规函数,您的代码应该按预期工作
g.selectAll(".mainBars").append("text").attr("x",function(d) {
return d.part=="primary"? -40: 40;
}).attr("y",function(d){
return +6;
}).text(function(d) {
return d.key;
}).attr("text-anchor", function(d) {
return d.part=="primary"? "end": "start";
});
一般来说,在箭头函数之前是箭头函数,它们是常规JS function
s。因此,使用IE11,我们只需要退后一步
var fruits=["apple","banana","orange"];
var modernResult=fruits.find(e => e.includes("nana"));
console.log(modernResult);
var IEresult=fruits.find(function(e){return e.includes("nana")});
console.log(IEresult);
IE目前不支持箭头符号,但有一个方便快捷的方法将ES6
代码转换为ES5.1
在IE
工作。访问Babel网站,然后将您的代码粘贴到左侧框中,并将正确的框代码复制到早期版本的JavaScript
。
例如,您的代码被转换为:
"use strict";
g.selectAll(".mainBars").append("text").attr("x", function (d) {
return d.part == "primary" ? -40 : 40;
}).attr("y", function (d) {
return +6;
}).text(function (d) {
return d.key;
}).attr("text-anchor", function (d) {
return d.part == "primary" ? "end" : "start";
});