根據用戶選擇在折線圖中重新渲染路徑問題

Question

我遇到了一個奇怪的問題。我創建了兩個帶有按鈕的折線圖來控制線條的可見性。在第二個圖表中，切換行可見性可以正常工作。但在第一張圖表中，一旦呈現，如果我嘗試切換線條的可見性，則不起作用（所有線條消失）。創建路徑的代碼甚至不會被調用。創建路徑的代碼是：

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

渲染第一次後，如果我切換的任何一圖的線的可見性，無論是線永久消失。兩個圖表的代碼完全相同。試圖調試但尚未成功。

Here is the JSFiddle.

Answer 1

當設置爲線圖中的變量，你g = svg.append("g").attr(...忘了var聲明。 g變量因此被添加到window，而不是範圍爲link函數。因此，折線圖指令的第二個實例會覆蓋變量 - 這會導致奇怪的行爲。

Here`s一個fixed version of your JSFiddle。我建議使用像ESLint這樣的JavaScript短語，它會警告你這種錯誤。