通過點擊d3選擇/取消選擇

Question

我試圖選擇/取消選擇單擊的行（鏈接）。但我已經有鼠標懸停功能，它應該不同於鼠標懸停，當我選擇一條線，該線的顏色需要改變，它需要繪製一個餅圖，取消選擇應該可用的點擊。

我有什麼：

nodeenter.on("mouseover", function(d){ 
console.log(d); 
d3.select(this).attr("fill", "yellow"); 

return tooltip.style("visibility", "visible").text("This node's id is: " + d.id + " and " + "Name: " + d.name);}) 
.on("mousemove", function(){ 

    return tooltip.style("top", 
    (d3.event.pageY-10)+"px").style("left",(d3.event.pageX+10)+"px");}) 
.on("mouseout", function(d){ 
    d3.select(this).attr("fill", "rgb(0, 0, " +(d*10) + ")"); 
    return tooltip.style("visibility", "hidden");}); 

link.on("mouseover", function(d){ 
    console.log(d) 
    d3.selectAll('.'+d.id).style('stroke','aqua'); 
    return tooltip.style("visibility", "visible").text("This line's id is: " + d.id + " and " + "Name: " + d.name);}) 
.on("mousemove", function(){return tooltip.style("top", 
    (d3.event.pageY-10)+"px").style("left",(d3.event.pageX+10)+"px");}) 
.on("mouseout", function(d){ 
    d3.selectAll('.'+d.id).style('stroke','black'); 
    return tooltip.style("visibility", "hidden");}); 

//to select 
link.on("click", function(d){ 
    if (!d3.select(this).classed("selected")){ 
    d3.select(this).classed("selected", true) 
    d3.select(this).style("stroke","red"); 
    }else{ 
    d3.select(this).classed("selected", false); 
    d3.select(this).style("stroke","black"); 
    } 
}); 

Answer 1

這裏的結果：https://jsfiddle.net/xcn35ycm/4/

我綁定一個上點擊功能的鏈接。

links.on("click", function(d){ 
    if (!d3.select(this).classed("selected")){ 
    d3.select(this).classed("selected", true) 
    d3.select(this).transition().attr("stroke","red"); 
    }else{ 
    d3.select(this).classed("selected", false); 
    d3.select(this).transition().attr("stroke","black"); 
    } 

，並更新鼠標移開功能

.on("mouseout", function(d){ 
    if(!d3.select(this).classed("selected")){ 
    d3.selectAll('.'+d.id).style('stroke','black'); 
    return tooltip.style("visibility", "hidden"); 
    } 
});