Problem beim erneuten Rendern des Pfades in einem Liniendiagramm basierend auf Benutzerauswahl

Question

Es gibt ein seltsames Problem, bei dem ich feststecke. Ich habe zwei Liniendiagramme mit Schaltflächen erstellt, um die Sichtbarkeit von Linien zu steuern. Im zweiten Diagramm funktioniert das Umschalten der Liniensichtbarkeit gut. Aber in der ersten Tabelle, wenn es einmal gerendert wird, wenn ich versuche, die Sichtbarkeit von Linien zu ändern, funktioniert es nicht (alle Linien verschwinden). Der Code zum Erstellen des Pfades wird nicht einmal aufgerufen. Der Codepfad zu erstellen, ist:

var valueline = d3.svg.line() 
    .x(function(d) { 
    return x(d.date); 
    }) 
    .y(function(d) { 
    return y(d.value); 
    }) 
    .interpolate("monotone"); 

// ... 

var lineInstance = g.selectAll(".line-instance") 
    .data(filteredData) 
    .enter().append("g") 
    .attr("class", "line-instance"); 


lineInstance.append("path") 
    .attr("class", "line") 
    .attr("d", function(d) { 
    //this code is called when second-chart line is toggled 
    // but not with first chart 
    console.log(d); 
    return valueline(d.values) 
    }) 
    .style("stroke", "black"); 

Nach erstmals Rendern Wenn ich die Sichtbarkeit von jeder der Linien der ersten Diagramm, sowohl die Linien verschwinden permanent hin- und herzuschalten. Der Code beider Diagramme ist genau gleich. Versucht zu debuggen aber noch kein Erfolg.

Here is the JSFiddle.

Answer 1

Wenn die Variablen für das Liniendiagramm einrichten, vergessen Sie eine var Aussage bei g = svg.append("g").attr(.... Die g Variable wird daher zu window hinzugefügt und nicht auf die link Funktion beschränkt. Daher überschreibt die zweite Instantiierung der Liniendiagramm-Direktive die Variable - was zu diesem merkwürdigen Verhalten führt.

Hier ist ein fixed version of your JSFiddle. Ich empfehle, einen JavaScript-Link wie ESLint zu verwenden, der Sie vor solchen Fehlern warnt.