Javascript 通过在d3中单击来选择/取消选择

我正在尝试选择/取消选择单击的行（链接）。但是我已经有了mouseover功能，它应该不同于mouseover，当我选择一条线时，线的颜色需要改变，它需要画一个饼图，取消选择也应该可以点击

我所拥有的：

    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");
  }
});

结果如下：

我在链接上绑定了一个点击功能

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");
  }

以及更新mouseout函数

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

结果如下：

我在链接上绑定了一个点击功能

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");
  }

以及更新mouseout函数

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

---

---

请把你的代码上传到像fiddle这样的平台上。当然！邮寄soon@DavidGuan好吧，在js小提琴中看起来很可笑。基本上，我想做的是通过单击两个节点之间的一条线来选择它，并以相同的方式取消选择它。你能帮忙吗？这是一个强制布局吗？@echonax不，它不是强制的，它是将你的代码上传到像fiddle这样的平台上。当然！邮寄soon@DavidGuan好吧，在js小提琴中看起来很可笑。基本上，我想做的是通过单击两个节点之间的一条线来选择它，并以相同的方式取消选择它。你能帮忙吗？这是一个强制布局吗？@echonax不，这不是强制的，而且对我来说很好，我早上第一件事就是试试！谢谢你！它的工作原理和我的一样，当我把鼠标移开时，它变黑了。你还在保留mouseout功能吗？行再次变黑时？@echanox我也在使用mouseover来显示；当我将鼠标悬停在线条或节点上时，它会给线条或节点上色，并显示ID和名称，但我会在关闭该函数后放入您发送给我的函数。情况仍然不好。我用新代码更新了问题。我很快会问另一个问题。如果你不介意的话，我可以标记你吗？看起来不错，我早上第一件事就是试试这个！谢谢你！它的工作原理和我的一样，当我把鼠标移开时，它变黑了。你还在保留mouseout功能吗？行再次变黑时？@echanox我也在使用mouseover来显示；当我将鼠标悬停在线条或节点上时，它会给线条或节点上色，并显示ID和名称，但我会在关闭该函数后放入您发送给我的函数。情况仍然不好。我用新代码更新了这个问题。我很快会问另一个问题。如果你不介意，我可以标记你吗？