Question

在下面的jsfiddle中，选择逻辑可以工作，但是取消选择逻辑则不然。我不明白为什么。

var selected;
function click(){

  // If nothing is selected then select the clicked node.
  if(!selected){
    selected = d3.select(this);
    selected.style('stroke', 'black');
  }

  // If the clicked node is already selected then unselect it.
  else if(selected == d3.select(this)){
    selected.style('stroke', 'white');
    selected = undefined;
  }
}

Answer 1

更改样式后，所选对象不是之前的d3对象。在分配变量之前更改样式或使用html元素。希望这会奏效。

var selected;
function click(){       
   if(!selected){
     selected = this;
     d3.select(selected).style('stroke', 'black');
  } 
  else if(selected == this){
     d3.select(selected).style('stroke', 'white');
     selected = undefined;
  }
}

Answer 2

您必须跟踪所选节点，而不是使用全局 selected变量。这里：

//var selected; // get rid of this
if (!d3.select(this).classed("selected")) {
   d3.select(this)
       .style('stroke', 'black')
       .classed("selected",true)
} 
else {
  d3.select(this)
      .style('stroke', 'white')
      .classed("selected",false);
}

这是你小提琴的updated version。

Answer 3

因评论限制而添加此答案。

与@Gilsha回答的内容类似，如果将select * from Customer where userStatus = MyEnum.VALUEx.name();替换为selected = undefined期间发生的内容，则用户可以无缝地选择节点。

使用@ Gilsha的答案，用户可以选择一个节点，但如果他们想要选择另一个节点，则只需取消选择另一个节点。

if(!selected){...}

使用上面的代码，用户可以选择一个节点，无论当前是否选择了一个节点，它将自动取消选择一个节点。

这是工作小提琴：http://jsfiddle.net/Rwd4q/14/

d3 - 选择/取消选择节点onclick

3 个答案: