通过点击/悬停节点显示名称？（D3.js版本4）

目前我有我的节点名称显示。如果用户点击节点或将鼠标悬停在节点上（我会喜欢测试后决定），我想我只想要显示节点的名称。通过点击/悬停节点显示名称？（D3.js版本4）

要显示的文字我有这个目前：

var nodes_text = svg.selectAll(".nodetext") 
     .data(nodes) 
     .enter() 
     .append("text") 
     .attr("class", "nodetext slds-text-heading--label") 
     .attr("text-anchor", "middle") 
     .attr("dx", -20) 
     .attr("dy", 20) 
     .text(function(d) { 
      return d.name; 
     });

我最初的想法是要删除的最后一条语句在上面的代码，并将其移动到“点击”事件......

svg.select("circle").on("click", function(d) { 
svg.select(".nodetext").text(function(d) { 
      return d.name; 
     }); 

});

但是，只有当我由于某种原因点击我的中央节点时才有效。想知道是否有更明显的方法。我的节点数据存储在一个名为“节点”的数组中。

编辑：这里是显示基本问题的一些测试数据的JFiddle。点击紫色节点工作，但既然你有文本两种不同的选择和圆（不带这些元素组，这是传统的做法）别人不 https://jsfiddle.net/mg8b46aj/1/

来源

2017-06-04 Eango

你总是选择的第一个元素都过滤他们。如果你需要帮助，你必须提供圆圈代码和数据数组的样本。最好是，如果你希望得到更快的帮助，可以创建一个jsfiddle/plunker/codepen/blocks/whatever。同时，我正在投票结束这个问题：*“寻求调试帮助的问题必须包含所需的行为，特定的问题或错误以及在问题本身中重现问题所需的最短代码。“* –

我可以提供jfiddle我想如果它允许我编辑问题。说尽可能短的代码，所以不想提供整个程序，我想我会尽量简化它。 – Eango

好，我只是撤回了我的投票。 –

你必须在代码中几个问题

您具有约束力的node-circles和node-text元素相同的数据，所以它是有道理的，如果你组逐一g元素
您正在尝试处理单击只有一个元素
svg.select("circle").on("click",handler)

这个事件里面选择和处理事件只有最后一个元素，你必须使用selectAll - svg.selectAll("circle").on("click",handler)
同样的事情内部处理函数
svg.select(".nodetext").text(function(d) { return d.name; });
你也选择在这里最后一个元素
而不是在点击设置text属性，它的更好，如果你之前设置过，只需display & hide它hover & click

如赫拉尔多所提到的，你必须筛选节点基于圆点击，但如果两个节点具有相同的名称？我也产生id为节点，并使用该ID

查看更新fiddle

来源

2017-06-04 07:09:50 bumbeishvili

，一个可能的解决方案是过滤基于文本点击的圆圈：

svg.selectAll("circle").on("click", function(d) { 
    svg.selectAll(".nodetext").filter(function (e){ 
     return e.name === d.name}) 
    .text(function(d) { 
     return d.name; 
    });

这里是更新小提琴：https://jsfiddle.net/2L9rzqbs/

来源

2017-06-04 06:42:35

通过点击/悬停节点显示名称？ （D3.js版本4）

回答

相关问题

通过点击/悬停节点显示名称？（D3.js版本4）