Pourquoi mes fonctions fléchées d3.js échouent-elles dans IE11 ?

Erreur de syntaxe de la fonction flèche dans IE 11

En utilisant d3.js pour la visualisation, un morceau de code rencontre une erreur de syntaxe lorsqu'il est exécuté dans IE 11. L'erreur se produit spécifiquement dans les fonctions fléchées utilisées pour définir attributs.

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"));

Le problème

Le coupable de l'erreur est l'utilisation des fonctions fléchées d => {}, qui ne sont pas pris en charge dans IE 11. Les fonctions fléchées sont une syntaxe JavaScript moderne introduite dans ES6, alors qu'IE 11 ne prend en charge que jusqu'à ES5.

La solution

Pour résoudre le problème, remplacez les fonctions fléchées par la syntaxe de fonction traditionnelle, comprise par IE. 11.

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";
    });

Considérations supplémentaires

Bien que la syntaxe des fonctions traditionnelles soit prise en charge dans IE 11, il est généralement recommandé d'utiliser les fonctionnalités JavaScript modernes lorsque cela est possible, car elles offrent un code plus propre et plus efficace. Cependant, pour des raisons de compatibilité avec les navigateurs plus anciens comme IE 11, il est nécessaire d'utiliser la syntaxe ES5 dans ce cas.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!