wake-up-neo.net

internet Explorer 10 zeigt keinen svg-Pfad an (d3.js-Diagramm)

Wenn ich dieses Diagramm beispielsweise öffne: http://bl.ocks.org/mbostock/1153292 In IE10, kann ich die Verknüpfungen zwischen den Knoten nicht sehen.

Gibt es irgendetwas, was ich im Code tun kann, um es sogar mit dem Internet Explorer zu sehen?

Es scheint, dass IE einfach einige Teile des SVG ignoriert ... Ich konnte keinen Weg finden, um es sichtbar zu machen.

20
Letterman

Zusammenfassung:

Es gibt einen Fehler in IE , der dazu führt, dass Pfade mit Markierungen nicht ordnungsgemäß gerendert werden. Der ursprüngliche Code mit entfernten Markierungen wird ohne Probleme gerendert.

Es gibt drei Lösungen: 

  1. Verwenden Sie keine Marker 
  2. Betten Sie die Markierungen wie folgt in den Pfad ein: http://jsfiddle.net/niaconis/3YsWY/9/
  3. Warten Sie, bis Microsoft diesen Fehler behoben hat

Option 2 ist zwar etwas hässlich, aber wahrscheinlich die am besten geeignete.


ursprünglicher Beitrag:

Leider habe ich herausgefunden, dass James 'Antwort nur für das statische svg funktioniert.

Ich zog die CSS und Javascript aus dem ursprünglichen Beispiel und legte sie in jsfiddle. Die Links wurden in Chrome 26 korrekt angezeigt (dies war meine Art von Kontrolltest), wurden jedoch in IE 10 (wie erwartet) überhaupt nicht angezeigt. Dann bearbeitete ich das Javascript, das sich mit der Erstellung der Links beschäftigte, entsprechend der Antwort, die James gab:

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

Dies fügte dem <g>-Element die angegebenen Attribute hinzu, hatte jedoch keine Auswirkungen auf die Anzeige des "Live" -Diagramms. (Wenn ich jetzt zurückschaue, habe ich bemerkt, dass der "statische" Graph Links im IE10 anzeigt, auch ohne diese Attribute, wie hier ).

Ich konnte die Links in IE10 (sogar direkt in der Originalbeispiel ) mithilfe der Entwicklersymbolleiste von IE sichtbar machen. Ich habe einen der <path>-Tags im DOM gefunden, dann rechts im Kontrollkästchen Stil deaktiviert und den "path.link" -Stil erneut geprüft.

Dadurch werden die Links angezeigt, aber bei jeder nachfolgenden Interaktion mit dem Diagramm werden die Markierungen von den Enden der Links getrennt. Sie bleiben einfach an Ort und Stelle, und ich habe nichts gefunden, was sie dazu bringt, sich wieder zu verbinden.

Die einzige Informationsquelle, die ich für relevant halten kann, ist dieser SO post: Das Element wird nicht in IE7 angezeigt, bis ich es über die Developer Toolbar bearbeite
Allerdings bin ich bei svg relativ neu, daher habe ich nicht die geringste Ahnung, wie ich den dort beschriebenen Fix nach svg portieren kann (dieser Fix war für ein HTML-Element).

Vielleicht hilft dies jemandem, in die richtige Richtung zu gehen?

P.S. Ich weiß, dass dies nicht gerade eine Antwort ist, und ich hätte dies nur als Antwort auf James 'Antwort gepostet, aber es scheint, dass ich nicht genug Ruf habe, um das zu tun. = \


Update:

Wie sich herausstellt, bezieht sich dieses Problem ausschließlich auf Marker. Diese Geige ist der ursprüngliche Code, jedoch ohne Markierungen, und die Links werden einwandfrei angezeigt. Das Markenproblem war zuvor dokumentiert und ist ein schwerwiegender Fehler von IE10. Warum die Links auch verschwinden, weiß ich nicht.

Diese Geige bietet eine Problemumgehung. Es ist nicht die sauberste Lösung, da ich jeden Marker direkt im Pfad des Links codiert habe, aber er funktioniert.

Wenn jemand eine Problemumgehung für das Markierungsproblem selbst finden kann, wäre dies besser und sollte zusätzlich als Antwort auf die andere Markierungsfrage gepostet werden.

(Beachten Sie auch: Bei meiner Lösung sehen gestrichelte Links schrecklich aus, daher habe ich sie stattdessen hellblau dargestellt.)

Dieser Fehler wurde an Microsoft gemeldet, aber bisher scheinen sie abgelehnt oder ignoriert zu haben. Gehen Sie zu diesem Beitrag auf der Issue-Tracker-Website von Microsoft und klicken Sie auf den Link, der angibt, dass Sie diesen Fehler reproduzieren können. Vielleicht können wir ihre Aufmerksamkeit bekommen?

29
nickiaconis

Die andere Markerfrage hat eine ausgezeichnete Antwort von Christian Lund, die für mich sehr gut funktioniert hat.

Um Ihnen die Mühe zu ersparen, dorthin zu gelangen, ist hier der Kern der Dinge:

In meiner Force-Animation habe ich eine tick-Funktion, die folgendermaßen aussieht:

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

Ich habe auch alle meine Diagrammverknüpfungen in der Variablen link, die wie folgt definiert ist:

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

Um die von Christian vorgeschlagene Magie zu implementieren, habe ich diese Zeile am Anfang meiner tick-Funktion hinzugefügt:

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

Ich habe alle meine Marker intakt gelassen. Was dieses kleine Wunder bewirkt, ist, dass Sie alle Verknüpfungsknoten mit jedem Tick der Animation übergehen und sie dem DOM erneut hinzufügen. Dies führt dazu, dass IE 10 sie wiedergibt, und alles ist gut mit der Welt.

Dies scheint die IE 10 Probleme zu beheben ... natürlich wird empfohlen, diesen Patch nur auf IE 10 hinzuzufügen

Wenn dies für Sie funktioniert, vergessen Sie nicht, zur anderen Frage zu gehen und Christian eine positive Bewertung zu geben

11
talkol

Ich bin nicht sicher, ob dies bereits behoben wurde, aber der Graph sieht in allen Browsern, die ich verglichen habe, fast identisch aus. Ich habe kein IE10, aber es sieht gut aus in IE9 und ich habe eine statische Kopie des Diagramms auf NetRenderer's IE10 getestet, und das sah auch gut aus.

Der einzige Unterschied, den ich sehen konnte, ist, dass IE für einige Links keine durchgezogenen Pfeilspitzen aufwies, und dies könnte einfach durch das Festlegen der Füllstile für diese Markertypen gelöst werden.

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

UPDATE:

Wenn Sie sich die hinzugefügten Bilder ansehen, sehe ich dies definitiv nicht in IE9 oder NetRenderer-Version von IE10. Haben Sie es auf mehreren Computern versucht? Ist es vielleicht etwas Besonderes für Ihr Setup?

Es ist schwierig, Vorschläge zu machen, ohne das Problem reproduzieren zu können, aber Sie sollten vielleicht versuchen, die Pfadeigenschaften direkt in der SVG-Datei und nicht über das CSS festzulegen.

Beim ersten g-Element würden Sie etwa Folgendes haben:

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

Hier ist ein codepen Beispiel , das eine statische Version des Markups verwendet. Und hier ist die fullpage-URL , wenn Sie es selbst in NetRenderer testen möchten.

Auch wenn das keine ideale Lösung ist, wäre es zumindest hilfreich zu wissen, ob das einen Unterschied macht. 

0