d3.js: aktualisieren Sie die Grafik mit neuen Datensatz

Question

I d3 PCP Diagramm erstellt haben, und hier ist mein Code:

var m = [60, 10, 10, 60], 
     w = 1000 - m[1] - m[3], 
     h = 270 - m[0] - m[2]; 

var x=d3.scaleOrdinal() 
    .range([0, w]), 
     y = {}, 
     dragging = {}; 

    var line = d3.line(), 
     background, 
     foreground; 

var svg = d3.select("#test").append("svg:svg") 
     .attr("width", w + m[1] + m[3]) 
     .attr("height", h + m[0] + m[2]) 
     .append("svg:g") 
     .attr("transform", "translate(" + m[3] + "," + m[0] + ")"); 

    //let dimensions 
    // Extract the list of dimensions and create a scale for each. 
    x.domain(this.dimensions = d3.keys(data[0]).filter(function(d) { 
     if (d === "name") return false; 
     if (d === "Plant" || d === "Chemical" || d === "Pathway" || d === "Gene" || d === "Disease") { 
     y[d] = d3.scaleOrdinal() 
      .domain(data.map(function(p) { 
      return p[d]; 
      })) 
      .range([h, 0]); 
     } else { 
     y[d] = d3.scaleLinear().domain([0, d3.max(data.map(function(p) { return p[d]; }))]).range([h, 0]); 
     } 
     return true; 
    })); 

    //alert(this.dimensions) 

    // Add grey background lines for context. 
    background = svg.append("svg:g") 
     .attr("class", "background") 
     .selectAll("path") 
     .data(data) 
     .enter().append("svg:path") 
     .style('fill', 'none') 
     .attr("d", path.bind(this)); 


    // Add blue foreground lines for focus. 
    foreground = svg.append("svg:g") 
     .attr("class", "foreground") 
     .selectAll("path") 
     .data(data) 
     .enter().append("svg:path") 
     .style('fill', 'none') 
     .style('stroke', 'steelblue') 
     .attr("d", path.bind(this)); 

    // Add a group element for each dimension. 
    let g = svg.selectAll(".dimension") 
     .data(this.dimensions) 
    .enter().append("svg:g") 
     .attr("class", "dimension") 
     .attr("transform", function(d) { 
     return "translate(" + x(d) + ")"; 
     }) 


    // Add an axis and title. 
    g.append("svg:g") 
     .attr("class", "axis") 
     .each(function(d) { 
     d3.select(this).call(d3.axisLeft(y[d])); 
     }) 
     .append("svg:text") 
     .attr("text-anchor", "middle") 
     .attr("y", -50) 
     .attr("x",-10) 
     .style("fill", "black") 
     .text(function(d) {return d }); 


    var firstAxis = d3.selectAll('g.dimension g.axis'); 

    firstAxis 
     .append("svg:image") 
     .attr('x',-20) 
     .attr('y',-60) 
     .attr('width', 40) 
     .attr('height', 60) 
     .attr("xlink:href", function(s) { 
     return "images/" + s+'.png'; 
     }); 

    function position(d) { 
     var v = dragging[d]; 
     return v == null ? x(d) : v; 
    } 

    function transition(g) { 
     return g.transition().duration(500); 
    } 

    // Returns the path for a given data point. 
    function path(d) { 
      return line(this.dimensions.map(function(p) { 
      return [position(p), y[p](d[p])]; 
     })); 

    } 

Ich habe eine einfache Eingabe von auf meiner Webseite, die eine Eingabe anzeigt Drop-Down-und basiert auf Ausgewählter Wert, den wir jedes Mal übergeben, wenn sich unser neuer Datensatz im Skript befindet. Jedes Mal, wenn ein Benutzer einen Wert im Formular ändert, wird ein neues Dataset an mein Skript gesendet. Ich kämpfe, um herauszufinden, wie man das Diagramm mit neuem Datensatz aktualisiere (refresh), den ich versucht habe, 10 und remove Funktion zu verwenden, aber nicht viel Erfolg.

svg.exit().remove(); 

Answer 1

Die Exit-Methode:

Gibt den Ausgang Auswahl: bestehende DOM-Elemente in der Auswahl für , die kein neues Datum gefunden wurde. (Die Exit-Auswahl ist leer für Selektionen, die nicht von selection.data zurückgegeben werden.) (API documentation).

Während Sie Daten für die Auswahl festgelegt haben g, foreground und background, haben Sie keine Daten für die Auswahl svg angegeben, so dass der Ausgang Auswahl leer. Folglich kann .remove() nichts entfernen.

---

eine Exit-Auswahl verwenden, beachten Sie, dass der Austritt Auswahl entfernt keine Elemente in einer Auswahl. Es ist eine Auswahl einer Teilmenge von Elementen in einer Auswahl, die keine entsprechenden gebundenen Daten mehr aufweisen.

Wenn eine Auswahl 10 DOM-Elemente enthält und das Datenarray der Auswahl auf ein Array mit 9 Elementen gesetzt ist, enthält die Ausgangsauswahl ein Element: das überschüssige Element.

Wir können diese Teilmenge mit .exit(). Remove() entfernen. Der Ausgang ist, welche Elemente wir nicht mehr benötigen, und remove() beseitigt sie. Exit entfernt keine Elemente, weil wir vielleicht noch etwas mit ihnen machen möchten, z. B. Transition oder Verstecken.

Wie im obigen Zitat erwähnt, müssen Sie, um eine Exit-Auswahl zu füllen, selection.data verwenden():

var selection = svg.selectAll("path") 
    .data(data); 

Jetzt können wir auf die Eingabeauswahl, die Exitauswahl und die Aktualisierungsauswahl zugreifen.

Wenn nicht ein Schlüssel angegeben wird, kann nur eine der Eingabe- oder Beendigungsauswahlen Elemente enthalten: Wenn wir mehr Elemente benötigen, müssen wir keine beenden, wenn wir überzählige Elemente haben, brauchen wir keine neuen.

überschüssige Elemente zu entfernen, können wir jetzt verwenden:

var selection = svg.selectAll("path") 
    .data(data);  

selection.exit().remove(); 

Da Sie Daten für andere Auswahlen wie foreground, background und g angeben, das ist die Auswahl, die Sie .exit verwendet werden sollen() on, als Teil eines vollständigen Eingabe-/Aktualisierungs-/Beendigungszyklus. Beachten Sie, dass Sie in d3v4 das Update zusammenführen und Auswahlen eingeben müssen, um Vorgänge für bereits vorhandene und neue Elemente in der Auswahl auszuführen.

---

Allerdings, wenn Sie wollen einfach nur loswerden der svg zu erhalten und neu beginnen (das ist, was es sieht aus wie Sie wollen - wie Sie versuchen, die svg zu entfernen) Sie einfach die svg entfernen können:

d3.select("#test") 
    .select("svg") 
    .remove(); 

dies wird jedoch hübsch zwischen Diagrammen nicht zulassen, dass übergehen oder die Eingabe nutzen/update/Exit-Zyklus.

Warum beachten Sie svg.remove()? Da die Auswahl einer svgg Element hält:

var svg = d3.select("#test") // returns a selection with #test 
     .append("svg:svg")  // returns a selection with the new svg 
     .attr(...)    // returns the selection with the newly created svg again 
     .append("svg:g")  // returns a selection with the new g 
     .attr(...);    // returns the selection with the newly created g again 

svg ist folglich eine Auswahl eines g und es wird nicht das Entfernen der SVG-Element entfernen. Tatsächlich führt das Ausführen des obigen Codeblocks nach svg.remove() dem DOM ein neues Svg-Element hinzu, während das alte nicht entfernt wird.