通过单击/悬停的节点显示名称?(D3.JS版本4)

Question

当前我的节点名称显示。我想如果用户单击节点或徘徊在该节点上，我只想拥有一个节点显示的名称(在测试我喜欢的内容后会决定(。

要显示文本我目前有：

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

我最初的想法是删除上述代码中的最后一句话，然后将其移至" onClick"事件...

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

但是，这仅在出于某种原因单击中央节点时才有效。想知道是否有更明显的方法。我的节点数据存储在一个名为"节点"的数组中。

编辑：这是一些显示基本问题的测试数据的jfiddle。单击紫色节点有效，但其他则不行https://jsfiddle.net/mg8b46aj/1/

Answer 1

由于您对文本和圆圈有两个不同的选择(不是具有这些元素的组，这是传统方法(，因此可能的解决方案是根据单击圆圈过滤文本：

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/

Answer 2

您在代码中有几个问题

1. 您正在为node-circles和node-text元素绑定相同的数据，因此，如果您将它们分组为一个g元素

是有意义的

2. 您正在尝试处理仅在一个元素上单击事件
   svg.select("circle").on("click",handler)

   这仅选择和处理事件仅最后一个元素，您必须使用selectAll -svg.selectAll("circle").on("click",handler)

3. 处理程序功能中的同一件事
   svg.select(".nodetext").text(function(d) { return d.name; });
   您还在此处选择最后一个元素

4. 而不是在单击上设置text属性，如果您之前设置它们，则最好在hover & click

   上进行display & hide

   正如Gerardo所述，您必须根据圆圈单击过滤节点，但是，如果两个节点具有相同的名字怎么办？我还为节点生成了id，并使用该ID

过滤了它们

请参阅更新的小提琴