未正確調用刷新函數d3

Question

我正在使用d3中的散點圖。圖表上的點代表一張紙。點擊右鍵點擊我有一個上下文菜單，其中有2個選項：1）將該論文添加到庫（將類型更改爲In_library）和2）從庫中刪除（完全從數據中刪除紙張）。

在每次這些更新之後，我會調用refreshGraph（）函數，這些更新會使用更新的數據重新繪製圖形。但是，我認爲沒有任何反應，因爲refreshGraph（）沒有被正確調用？或者對於選項1，類型庫沒有正確設置？當在選項1之後調用refreshGraph時，點應該變爲藍色，並在調用選項2時，點將從顯示中消失，因爲它已從用於繪製圓圈的數據的alldata中刪除。這裏是相關的代碼：

allData = []; 

var menu = [{ 
title: 'Add to Library', 
action: function addToLibrary(elem, d, i) { 

    d3.json("connection6.php?paperID="+d.ID, function(error, dataJson) { 

     for(i=0;i<allData.length;i++){ 
      if (d.type === "In_library") 
      { 
      alert("The paper: " + d.TITLE + " is already in your Library!"); 
        return; 
      } 
      } 

      d.type = "In_library"; // is this the correct way to change the type if the input has a different type?? 
      refreshGraph(); 

     }) 
     refreshGraph(); 
    } 

}, 
{ 
title: 'Remove from Library', 
action: function removeFromLibrary (elem, d, i) { 

     d3.json("connection9.php?paperID="+d.ID, function(error, dataJson) { 

      //loop through allData and if selected ID has type In_library, remove from allData 
      for(i=0;i<allData.length;i++){ 
       if (d.type == "In_library"){ 
        allData.splice(i--,1);  
      } 
      } 
      refreshGraph(); 
      }) 
    } 

} 
] 

function refreshGraph() { 

// draw dots 
var circles = svg.selectAll("circle") 
     .data(allData) 

    circles.transition() 
     .attr("cx", function(d) {return x(YearFn(d))}) 
     .attr("cy", function(d) {return y(Num_citationsFn(d))}) 

    circles.enter() 
     .append("circle") 
     .attr("class", "dot") 
     .attr("r", 3.5) 
     .attr("cx", function(d) {return x(YearFn(d))}) 
     .attr("cy", function(d) {return y(Num_citationsFn(d))}) 
     .style("fill",function(d){ 
        var colour = "black" 
        switch(d.type){ 

        case "In_library": 
         colour = "blue"; 
        break; 
        case "cited by": 
         colour = "red"; 
        break; 
        case "cites": 
         colour = "green"; 
        break; 
        case "selected": 
         colour = "magenta"; 
        break; 
        default: 
         colour = "black"; 
        } 
        return colour; 
        }) 

     .on("mouseover", mouseHandler) 
     .on("mouseout", mouseoutHandler) 
     .on("click", clickHandler) 
     .on("contextmenu", rightClickHandler); 


svg.select(".y.axis").call(yAxis); 
svg.select(".x.axis").call(xAxis); 

//don't want dots overlapping axis, so add in buffer to data domain 
x.domain([d3.min(allData, YearFn)-1, d3.max(allData, YearFn)+1]); 
y.domain([d3.min(allData, Num_citationsFn)-1, d3.max(allData, Num_citationsFn)+1]); 

    } 

任何幫助非常感謝我是新的d3，所以在此先感謝！

Answer 1

每次單點更改時，不需要重新繪製所有數據。只需更新那一點。

function rightClickHandler() { 

    // if option 1 
    d3.select(this).style("fill", "blue"); 

    // if option 2 
    d3.select(this).remove(); 

} 

你的問題可能出現，因爲當你調用refreshGraph第二次（或第三）你是不是清楚，已經繪出的圓圈。你的refreshGraph函數沒有更新已經繪製過的點，它每次都重新創建它們，如果你沒有清除那些已經存在的點，你將不會看到新的點（或者沒有它們，或者顏色），因爲它們隱藏在舊點之後。

編輯：

如果你想每次都重新添加數據，你首先要清除現有的數據。在refreshGraph函數開始時，添加以下行：

if(!d3.selectAll("circle").empty()) d3.selectAll("circle").remove(); 

即，如果存在圓形元素，請將其移除。這假定你只是在refreshGraph函數中創建圓形元素。如果您在別處創建它們，則應該使用.dot選擇器。