Связывание данных с новыми элементами в d3

Question

Я работаю с диаграммой рассеяния d3. Я подключаюсь к моей базе данных, и сначала я начинаю с let say 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" к вашим вновь созданным узлам.

Заменить строки

// 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) { 
    ... 
    }) 

по

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 

и также добавить .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