Question

我试图在您单击某个节点时显示该框，然后在您单击它时消失。现在它从开始出现，当你点击时它不会消失。这是JSFiddle

我试着假设编辑在这里的某处，但我无法弄清楚我的生活。我还检查了其他相关问题，但它们有不同的具体问题。

 var node = svg.selectAll(".node")
  .data(data.nodes)
.enter().append("g")
  .attr("class", "node")
  .on("mouseover", mouseover)
.on("mouseout", mouseout)
 .on("click", function(d) {
  text = "Generic Text Here: " + d.name;
      d3.selectAll(".infobox")  
    //.append("rect")
    //.attr("x", 70)
    //.attr("y", 5)
    //.attr("height", 100)
    //.attr("width", 200) 
    //.select("text")
    .select("a")
    .attr("xlink:href", text) 
    .selectAll("text").text(text)})  
  .call(force.drag);

谢谢谢谢

Answer 1

似乎与此问题类似：javascript hide/show element

如果你不想使用jQuery（d3.js可以做同样的事情 - 你最了解你的应用程序）：

///Show. Put in your "mouseout" callback
document.getElementById(id).style.display = 'block';
//Hide. Put in your callback in .on("click", ....
document.getElementById(id).style.display = 'none';

＆＃34; id＆＃34;对应你的盒子。希望有所帮助！

编辑： http://jsfiddle.net/nw7g157c/19/

我不得不做一些黑客攻击，但我使用上面的建议添加了这个：

document.documentElement.onclick = function(e) {
  let evt = e || window.event, // IE...
      target = evt.target || evt.srcElement // IE again...

  if (target.nodeName !== 'circle') { //show the plot box if not a circle:
      document.getElementById('plot').style.display = 'block';
    }
}

这是你的（＆＃34;点击＆＃34; ...）

document.getElementById('plot').style.display = 'none';

请投票，因为它会喂养我的孩子

Answer 2

除了hide / show之外，我猜你还需要处理一个节点点击的场景，现在显示的框点击另一个节点，然后该节点数据可以显示该框

  if(this.getAttribute("ind") == prev && document.getElementById("plot").style.display == 'block'){
        document.getElementById("plot").style.display = 'none';
    }else{
    document.getElementById("plot").style.display = 'block';}
    prev = i;

请参阅此小提琴http://jsfiddle.net/nw7g157c/9/

在D3中单击鼠标时显示/隐藏元素

2 个答案: