Entfernen Zeile aus line-Diagramm in d3.js

Habe ich eine Schaltfläche, wird eine Linie Diagramm mit d3.js. Aber ich will die Zeile entfernen aus dem Graphen nach anklicken der gleichnamigen Schaltfläche. Habe ich einen toggle-button, aber wie Entferne ich die Zeile aus dem Diagramm ? Ich habe die folgende Funktion, die plots der Graphen. svg.selectAll("Pfad").remove() ist die Entfernung der Achse und aber nicht die Linie.

Funktion plotGraph(Datei) {

var color = d3.scale.category10();
var svg = d3.select('#mySvg');

svg.selectAll("path").remove();

var line = d3.svg.line().interpolate("basis").x(function(d) {
    return x(d.date);
}).y(function(d) {
    return y(d.mvalue);
});

d3.csv(file,function(error, data) {

    color.domain(d3.keys(data[0]).filter(function(key) {
        return key !== "date";
    }));

    data = data.map(function(d) {
    return {
        mvalue : +d.mvalue,
        date : parseDate(d.date)
    };
    });

    x.domain(d3.extent(data, function(d) {
        return d.date;
    }));
    y.domain([ 0, 100 ]);
    svg.append("path").datum(data).attr("class", "line").attr("d",line);

});

}

Haben Sie versucht d3.select("path.line").remove()?
Ja, das funktioniert. aber ich habe mehrere Linien in meinem Diagramm. Kann ich entfernen, nur ausgewählte. Gibt es eine Möglichkeit zu geben, jede Zeile eine id ?
Ja, .attr("id", "something"). Dies kann auch durch eine Funktion.
d3.auswählen("path.Linie) ist das entfernen aller Linien auf der Grafik. ich brauche nur zu entfernen, das spezifische. .attr () - Funktion kann Hinzugefügt werden, um Linien -, sondern es ist Hinzugefügt, um das svg-element. Zum Beispiel : svg.append("Pfad").datum(Daten).attr("class", "Linie").attr("d",Zeile).attr("id","lineId"); dann will ich entfernen Sie diese Zeile mit der id als lineId. wie soll ich es tun ?
Es sieht aus wie Sie sind, indem nur ein Pfad und d3.select("path.line").remove() entfernt nur einen einzigen Weg. Möchten Sie Teil eines Pfades?

InformationsquelleAutor void | 2014-01-31

10

Haben Sie ein paar Optionen zum auswählen einer spezifischen element, das Sie entfernen möchten. Wenn das element identifiziert wird, indem eine Klasse, die Sie tun können,
```
d3.select("path.line").remove();
```
Wenn Sie möchten, entfernen Sie alle Linien auf der Grafik, die Sie verwenden sollten
```
d3.selectAll("path.line").remove();
```
Wenn, wie in deinem Beispiel, es sind mehrere dieser Elemente, können Sie eine ID zuweisen und zu verwenden, um es zu entfernen.
```
svg.append("path")
//...
.attr("id", "id");

//...

d3.select("#id").remove();
```
InformationsquelleAutor Lars Kotthoff
2

Können Sie speichern die Zeile in einer Variablen zu, und verwenden Sie dann als Griff, um es zu entfernen später.

In d3, die .append - operator gibt der angehängte untergeordnete (child, so zu tun, alles, was Sie tun müssen, ist dieses:
```
var myLine;

function(appendLine){
    ...
    myLine = svg.append("path").datum(data)...
    ...
}

function(removeLine){
    myLine.remove()
}
```
Verwenden appendLine wenn Sie möchten, erstellen Sie die Linie und removeLine um es zu entfernen. Mit dieser Methode können Sie eine variable für jede Zeile, die Sie Steuern wollen, oder sonst mit Variablen scoping nicht haben, sich darum zu kümmern. Es hängt davon ab, was der rest des Codes aussieht.

Alternativ, wenn Sie eine Zeile mit einer ID, die Sie entfernen möchten, d3.select('#myId').remove() funktionieren sollte.

InformationsquelleAutor ckersch

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.