web-dev-qa-db-fra.com

internet Explorer 10 ne montrant pas le chemin svg (graphique d3.js)

Si j'ouvre ce graphique par exemple: http://bl.ocks.org/mbostock/1153292 Dans IE10, je ne peux tout simplement pas voir les liens entre les nœuds.

Y a-t-il quelque chose que je puisse faire dans le code pour permettre de voir même avec Internet Explorer?

Il semble que IE ignore simplement quelques morceaux du svg ... Je n'ai trouvé aucun moyen de le rendre visible.

javascriptinternet-explorersvgd3.jsinternet-explorer-10
20
Letterman

Résumé:

Il y a un bug dans IE qui provoque un rendu incorrect des chemins avec des marqueurs. Le code original avec les marqueurs supprimés s'affiche sans problème.

Il y a trois solutions: 

  1. Ne pas utiliser de marqueurs 
  2. Intégrez les marqueurs dans le chemin comme ceci: http://jsfiddle.net/niaconis/3YsWY/9/
  3. Attendez que Microsoft corrige ce bogue

L’option 2, bien qu’un peu moche, est probablement la plus viable.

Message d'origine:

Malheureusement, j'ai trouvé que la réponse de James ne fonctionne que pour le svg statique.

J'ai tiré le css et le javascript de l'exemple original et les ai placés dans jsfiddle. Les liens s'affichaient correctement dans Chrome 26 (il s'agissait de mon type de test de contrôle), mais ne s'affichaient pas du tout dans IE 10 (comme prévu). J'ai ensuite édité le javascript qui traitait de la création des liens en fonction de la réponse donnée par James:

var path = svg.append("svg:g")
    .attr("fill", function(d) { return "none"; }) /*new*/
    .attr("stroke-width", function(d) { return "1.5px"; }) /*new*/
    .attr("stroke", function(d) { return "#666"; }) /*new*/
    .selectAll("path")
    .data(force.links())
    .enter().append("svg:path")
    .attr("class", function(d) { return "link " + d.type; })
    .attr("marker-end", function(d) { return "url(#" + d.type + ")"; });

Cela ajoutait les attributs spécifiés à l'élément <g>, mais n'avait aucun effet sur l'affichage du graphe "en direct". (En revenant maintenant, j'ai remarqué que le graphique "statique" affiche les liens dans IE10 même sans ces attributs, comme on le voit ici .)

J'ai été capable de rendre les liens visibles dans IE10 (même directement dans le exemple d'origine ) en utilisant la barre d'outils de développeur d'IE. J'ai trouvé l'une des balises <path> dans le DOM, puis dans l'onglet Style à droite, décochée et revérifié le style "path.link".

Cela permet d'afficher les liens, mais toute interaction ultérieure avec le graphique déconnecte les marqueurs des extrémités des liens. Ils restent simplement en place et je n'ai rien trouvé qui puisse les amener à se réattacher.

La seule source d'informations que je puisse trouver qui semble pertinente est cette SO message: L'élément n'apparaît pas dans IE7 tant que je ne l'ai pas modifié via la barre d'outils Developer }
Cependant, je suis assez nouveau dans svg, je n'ai donc pas la moindre idée de la manière de porter le correctif décrit ici dans svg (ce correctif concernait un élément html)

Peut-être que cela aidera quelqu'un à se diriger dans la bonne direction?

P.S. Je sais que ce n'est pas exactement une réponse, et je l'aurais simplement postée pour répondre à la réponse de James, mais il semble que je n'ai pas assez de réputation pour le faire. = \

Mise à jour:

Il se trouve que cette question est entièrement liée aux marqueurs. Ce violon est le code d'origine, mais les marqueurs ont été supprimés et les liens s'affichent correctement. Le problème de marqueur a été documenté auparavant et constitue un grave bogue d'IE10. Pourquoi cela fait aussi disparaître les liens, je ne sais pas.

_ { Ce violon } _ propose une solution de contournement. Ce n'est pas la solution la plus propre car j'ai encodé chaque marqueur directement dans le chemin de son lien, mais cela fonctionne.

Si quelqu'un peut trouver un moyen de contourner le problème du marqueur lui-même, ce sera mieux et il devrait en outre être posté comme réponse à la autre question du marqueur .

(Remarque: grâce à ma solution, les liens en pointillés ont une apparence terrible, je les ai donc rendus bleu clair.)

Ce bogue a été signalé à Microsoft, mais jusqu'à présent, ils semblent l'avoir refusé ou ignoré . Veuillez vous rendre sur cet article sur le site Web du système de suivi des problèmes de Microsoft, puis cliquez sur le lien vous indiquant que vous pouvez reproduire ce problème. Peut-être pouvons-nous attirer leur attention?

29
nickiaconis

Le autre marqueur a une excellente réponse de Christian Lund qui a très bien fonctionné pour moi.

Pour vous éviter la peine d'aller là-bas, voici l'essentiel des choses:

Dans mon animation de force, j'ai une fonction tick qui ressemble à ceci:

force.on("tick", function() {
  ...
});

Je tiens également tous mes liens graphiques dans la variable link, définie comme suit:

var link = svg.selectAll(".link").data(links).enter() ...

Maintenant, pour implémenter la magie suggérée par Christian, j'ai ajouté cette ligne au début de ma fonction tick:

force.on("tick", function() {
  link.each(function() {this.parentNode.insertBefore(this, this); });
  ...
});

J'ai laissé tous mes marqueurs intacts. Ce petit morceau d’émerveillement consiste à parcourir tous les nœuds de liaison à chaque tick de l’animation et à les rajouter au DOM. Cela provoque IE 10 à les restituer, et tout va bien pour le monde.

Cela semble résoudre les problèmes de IE 10 ... bien sûr, il est recommandé d'ajouter ce correctif uniquement sur IE 10

Si cela fonctionne pour vous, n'oubliez pas de passer à l'autre question et de donner à Christian un vote positif.

11
talkol

Je ne sais pas si cela a déjà été résolu, mais le graphique me semble presque identique dans tous les navigateurs que j'ai comparés. Je n'ai pas IE10, mais ça a l'air bien dans IE9 et j'ai testé une copie statique du graphique sur NetRenderer IE10 et cela avait l'air bien aussi.

La seule différence que j’ai pu constater est que IE n’affichait pas de flèche pleine pour certains liens, ce qui pourrait être facilement résolu en définissant simplement les styles de remplissage pour ces types de marqueurs.

marker#suit {
  fill: black;
}
marker#resolved {
  fill: black;
}

UPDATE:

En regardant les images que vous avez ajoutées, ce n'est certainement pas ce que je vois dans la version de IE10 de NetRenderer ou de NetRenderer. Avez-vous essayé sur plusieurs ordinateurs? Est-ce peut-être quelque chose de spécifique à votre configuration?

Il est difficile de faire des suggestions sans pouvoir reproduire le problème, mais vous voudrez peut-être essayer de définir les propriétés du chemin directement dans le fichier SVG plutôt que via le CSS.

Ainsi, sur le premier élément g, vous obtiendrez quelque chose comme ceci:

<g fill="none" stroke-width="1.5px" stroke="#666">

Voici un exemple de codepen utilisant une version statique du balisage. Et voici l'URL fullpage si vous voulez le tester vous-même dans NetRenderer.

Même si ce n'est pas la solution idéale, il serait au moins utile de savoir si cela fait une différence. 

0
James Holderness