¿Por qué esta función de flecha no funciona en IE 11?
El siguiente código no funciona en IE 11, genera un error de sintaxis en la consola
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"));
Uso d3.jsde gráficos bipartitos para visualización
Este código causa el problema en la declaración anteriord=>(d.part=="primary"? -40: 40)
Estás usando funciones de flecha. IE11 no los admite. Utilice functionfunciones en su lugar.
Aquí está la traducción de Babel de eso a 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";
});
Dado que ninguno de los códigos utiliza this, no tiene que preocuparse por preservar thisel comportamiento de la función de flecha (ya que las funciones tradicionales se obtienen thispor cómo se llaman, pero las funciones de flecha se cierran sobre this ). Pero si el código se usara thisy usted quisiera que se comportara como lo haría una función de flecha, querrá usar las técnicas habituales para eso.
Evite el uso de funciones de flecha si necesita admitir IE 11, ya que no es compatible
Cámbielos a funciones normales y su código debería funcionar como espera
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";
});
En general, antes de que las funciones de flecha fueran funciones de flecha, eran JS normales function. Entonces con IE11 solo tenemos que dar un paso atrás en el tiempo.
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 no admite la notación de flechas por ahora, pero existe una manera práctica y rápida de transpilar sus ES6códigos ES5.1para trabajar en IE. Visite el sitio web de Babel , luego pegue sus códigos en el cuadro de la izquierda y copie el código del cuadro de la derecha que se transpila a la versión anterior de JavaScript.
Por ejemplo, su código se transpila a:
"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";
});
