javascript - 在单击/悬停的节点上显示名称？ (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;
        });

});

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

编辑:这是一些显示基本问题的测试数据的 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;
    });

这是更新 fiddle :https://jsfiddle.net/2L9rzqbs/