将点击事件绑定到D3元素 [英] Bind click event to D3 element

问题描述

下面的结果在方法 nodeClick（）在页面加载时调用（不点击）。为什么？如何使得nodeClick（）函数仅在我单击元素时触发？代码：

  var node = svg.selectAll（。node）
 .on （））; 
 
 
  var width = 960，
 height = 500; 
 
 var color = d3.scale.category10（）; 
 
 var nodes = []，
 links = []; 
 
 var force = d3.layout.force（）
 .nodes（nodes）
 .links（links）
 .charge（-400）
 .linkDistance（120）
 .size（[width，height]）
 .on（tick，tick）; 
 
 var svg = d3.select（body）append（svg）
 .attr（width，width）
 .attr高度）; 
 
 var node = svg.selectAll（。node）
 .on（click，nodeClick（）），
 link = svg.selectAll ）; 
 
 function start（）{
 link = link.data（force.links（），function（d）{return d.source.id + - + d.target.id ;}）; 
 link.enter（）。insert（line，.node）。attr（class，link）; 
 link.exit（）。remove（）; 
 
 node = node.data（force.nodes（），function（d）{return d.id;}）; 
 node.enter（）。append（circle）。attr（class，function（d）{returnnode+ d.id;}）attr（r，8） 
 node.exit（）。remove（）; 
 
 force.start（）; 
} 
 
 function nodeClick（）{
 console.log（ASDASDASD）; 
} 
 
 function tick（）{
 node.attr（cx，function（d）{return dx;}）
 .attr ，function（d）{return dy;}）
 
 link.attr（x1，function（d）{return d.source.x;}）
 .attr ，function（d）{return d.source.y;}）
 .attr（x2，function（d）{return d.target.x;}）
 .attr ，function（d）{return d.target.y;}）; 
} 
  
 
 
解决方案
函数，当您设置点击处理程序。你需要附加一个函数到处理程序，当调用时调用你实际想要的函数：
  .on ，function（）{nodeClick（）}）; 
  
或等效地给出函数名称而不调用函数b 
 
  .on（click，nodeClick） 
  
 
The following results in the method nodeClick() being called once upon page load (without clicking). Why? How do I make the nodeClick() function be triggered only when I click the element? Code: 
var node = svg.selectAll(".node")
    .on("click", nodeClick());
in the contex
var width = 960,
   height = 500;

var color = d3.scale.category10();

var nodes = [],
    links = [];

var force = d3.layout.force()
    .nodes(nodes)
    .links(links)
    .charge(-400)
    .linkDistance(120)
    .size([width, height])
    .on("tick", tick);

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

var node = svg.selectAll(".node")
    .on("click", nodeClick()),
    link = svg.selectAll(".link");

function start() {
    link = link.data(force.links(), function(d) { return d.source.id + "-" + d.target.id; });
    link.enter().insert("line", ".node").attr("class", "link");
    link.exit().remove();

    node = node.data(force.nodes(), function(d) { return d.id;});
    node.enter().append("circle").attr("class", function(d) { return "node " + d.id; }).attr("r", 8);
    node.exit().remove();

    force.start();
}

function nodeClick() {
    console.log("ASDASDASD");
}

function tick() {
    node.attr("cx", function(d) { return d.x; })
        .attr("cy", function(d) { return d.y; })

    link.attr("x1", function(d) { return d.source.x; })
        .attr("y1", function(d) { return d.source.y; })
        .attr("x2", function(d) { return d.target.x; })
        .attr("y2", function(d) { return d.target.y; });
}

解决方案
You're actually calling the function when you're setting up the click handler. You need to attach a function to the handler that will call the function you actually want when called:
.on("click", function() { nodeClick() });
or equivalently give it the function name without calling the function (shorter)
.on("click", nodeClick);


                        
这篇关于将点击事件绑定到D3元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！