Aktualisieren des SVG-Element Z-Index mit D3

Wie bereits in den anderen Antworten, SVG nicht haben eine Vorstellung von einem z-index. Stattdessen wird die Reihenfolge der Elemente im Dokument bestimmt die Reihenfolge, in der Zeichnung.

Abgesehen von der Neuanordnung der Elemente manuell, es gibt einen anderen Weg für bestimmte Situationen:

Arbeiten mit D3 Sie haben oft bestimmte Arten von Elementen, die sollten immer gezogen werden, auf andere Typen von Elementen.

Zum Beispiel, wenn die Verlegung aus Grafiken, links sollten immer gesetzt werden unterhalb der Knoten. Mehr im Allgemeinen, einige hintergrund-Elemente müssen in der Regel platziert werden, unter alles andere, während einige highlights und overlays sollten gelegt werden.

Wenn Sie diese Art von situation, fand ich, dass die Schaffung übergeordneten Gruppe Elemente für diejenigen Gruppen von Elementen ist der beste Weg zu gehen. In SVG, können Sie die g element. Zum Beispiel, wenn Sie links, der sollte immer unten Knoten, tun Sie den folgenden:

svg.append("g").attr("id", "links")
svg.append("g").attr("id", "nodes")

Nun, wenn Sie malen Sie Ihre links und Knoten, wählen Sie wie folgt vor (die Selektoren beginnen mit # Referenz-element-id):

svg.select("#links").selectAll(".link")
//add data, attach elements and so on

svg.select("#nodes").selectAll(".node")
//add data, attach elements and so on

Nun, alle links werden immer angehängt werden, strukturell, bevor alle Knoten-Elemente. So, der SVG zeigt alle links, die unter allen Knoten, egal wie oft und in welcher Reihenfolge Sie hinzufügen oder entfernen von Elementen. Natürlich, alle Elemente des gleichen Typs (d.h. innerhalb des gleichen Containers) wird noch Gegenstand der Reihenfolge, in der Sie Hinzugefügt wurden.

InformationsquelleAutor der Antwort notan3xit

SVG nicht, z-index. Z-Reihenfolge wird bestimmt von der Reihenfolge der SVG-DOM-Elemente in Ihrem container.

Soweit ich das beurteilen konnte (und ich habe versucht, diese ein paar mal in der Vergangenheit), D3 nicht bieten Methoden für das abnehmen und Wiederanbringen ein einzelnes element, um es auf der Vorderseite oder ähnliches.

Es ist ein .order() Methodedie eine Neuverteilung der Knoten entsprechend der Reihenfolge erscheinen Sie in der Auswahl. In Ihrem Fall, Sie brauchen, um ein einzelnes element auf der Vorderseite. Also, technisch gesehen, könnten Sie resort die Auswahl mit dem gewünschten element in der front (oder am Ende, kann mich nicht erinnern, die obersten), und rufen Sie dann order().

Oder Sie könnte überspringen d3 für diese Aufgabe und verwenden nur JS (bzw. jQuery) erneut einfügen, dass einzelne DOM element.

InformationsquelleAutor der Antwort meetamit

Erweitern wollte, was @notan3xit beantwortet, anstatt zu schreiben, eine ganze neue Antwort (aber ich habe nicht genug reputation).

Andere Weise zu lösen, die element-order-problem ist die Verwendung von 'insert' eher als 'append' beim zeichnen . So werden die Wege immer zusammen gelegt werden, bevor die anderen svg-Elemente(dies nimmt an, dass Ihr code bereits funktioniert die enter() für links, bevor Sie die enter() für die anderen svg-Elemente).

d3 insert-api: https://github.com/mbostock/d3/wiki/Selections#insert

InformationsquelleAutor der Antwort Ali

Es hat mich Alters zu finden, wie Sie Sie optimieren die Z-Ordnung in ein bestehendes SVG. Ich brauchte es eigentlich im Rahmen von d3.Pinsel mit tooltip-Verhalten. Um die beiden Funktionen arbeiten gut zusammen (http://wrobstory.github.io/2013/11/D3-brush-and-tooltip.html), müssen Sie die d3.Pinsel werden die ersten in der Z-Reihenfolge (1. gezeichnet werden, auf der Leinwand, dann bedeckt der rest der SVG-Elemente), und es wird erfassen alle Maus-events, egal was oben drauf (mit höheren Z-Indizes).

Forum die meisten Kommentare sagen, dass Sie sollten hinzufügen der d3.Pinsel zuerst in deinem code, dann per "Zeichnung" - code. Für mich war es aber nicht möglich, da lud ich eine externe SVG-Datei. Sie können einfach fügen Sie die Bürste jederzeit und ändern der Z-Reihenfolge später mit:

d3.select("svg").insert("g", ":first-child");

Im Rahmen einer d3.Pinsel-setup wird wie folgt Aussehen:

brush = d3.svg.brush()
    .x(d3.scale.identity().domain([1, width-1]))
    .y(d3.scale.identity().domain([1, height-1]))
    .clamp([true,true])
    .on("brush", function() {
      var extent = d3.event.target.extent();
      ...
    });
d3.select("svg").insert("g", ":first-child");
  .attr("class", "brush")
  .call(brush);

d3.js insert () - Funktion API: https://github.com/mbostock/d3/wiki/Selections#insert

Hoffe, das hilft!

InformationsquelleAutor der Antwort mskr182

Können Sie Tun, wie diese Auf der Maus Über Ziehen Sie es nach oben.

d3.selection.prototype.bringElementAsTopLayer = function() {
       return this.each(function(){
       this.parentNode.appendChild(this);
   });
};

d3.selection.prototype.pushElementAsBackLayer = function() { 
return this.each(function() { 
    var firstChild = this.parentNode.firstChild; 
    if (firstChild) { 
        this.parentNode.insertBefore(this, firstChild); 
    } 
}); 

};

nodes.on("mouseover",function(){
  d3.select(this).bringElementAsTopLayer();
});

Wenn Sie wollen Push-To-Back

nodes.on("mouseout",function(){
   d3.select(this).pushElementAsBackLayer();
});

InformationsquelleAutor der Antwort RamiReddy P