將數據綁定到d3中的新元素

Question

我正在使用d3散點圖。我連接到我的數據庫，最開始我會在圖表上說出3個點。每個點代表一張紙，x軸是年份，y軸是它的引用次數。現在，當我點擊一個點時，該文件引用的論文就會出現在圖表上。到目前爲止，我已經完成了上述所有工作，但現在我的問題是，儘管當我點擊相關論文時，圖表上出現了相關論文，但當點擊這些點時，沒有任何反應。所以我沒有設法將我的Json數據綁定到新的點上。下面是相關代碼：

// initial connection to display papers 
d3.json("connection4.php", function(error,dataJson) { 

dataJson.forEach(function(d) { 

    d.YEAR = +d.YEAR; 
    d.counter = +d.counter; 
    console.log(d); 
    }) 

//baseData is the original data that I dont want to be replaced 
baseData = dataJson; 

// draw dots 
    var g = svg.selectAll(".dot") 
     .data(baseData) 
     .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","blue") 

.on("click", function(d, i) { 

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

      console.log(dataJson); 

      dataJson.forEach(function(d) { 
       d.YEAR = +d.YEAR; 
       d.counter = +d.counter; 
       console.log(d); 


       baseData.push(d); 
       }) 

       var g = svg.selectAll(".dot") 
        .data(baseData) 
        .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", "red") 

        })  

我在PHP文件查詢是罰款，我可以看到他們正在返回正確的數據，所以我想我的主要問題是從我的第二個連接到新的綁定我的JSON數據點。我不知道有誰能夠闡明我需要如何去解決這個問題。我是新來的d3，所以任何反饋意見是讚賞！在此先感謝

Answer 1

我認爲問題很簡單，你不會將"click"事件綁定到您新創建的節點。

通過

function clickHandler (d,i){ 
    ... 
} 

// draw dots 
var g = svg.selectAll(".dot") 
    .data(baseData) 
    .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","blue") 
    .on("click", clickHandler); //clickHandler is referenced here, instead of the original anonymous function 

更換線

// draw dots 
var g = svg.selectAll(".dot") 
    .data(baseData) 
    .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","blue") 
    .on("click", function(d, i) { 
    ... 
    }) 

，並添加一個.on("click", clickHandler);調用到新創建的節點，對clickHandler函數內部，即：

  ///add linked dots 
      var g = svg.selectAll(".dot") 
       .data(baseData) 
       .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", "red") 
       .on("click", clickHandler); //click handler is *also* called here