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"事件绑定到新创建的节点上。

替换

行

// 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

将数据绑定到d3中的新元素

1 个答案: