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。单击紫色节点可以正常工作，但其他节点不可 Fast Fourier Transform Javascript

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

您在代码中有几个问题

您绑定了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之前更好
正如Gerardo所提到的，你必须根据圆圈点击过滤节点，但是，如果两个节点具有相同的名称呢？我还为节点生成了id，并使用该ID

查看更新后的fiddle

显示已点击/悬停节点的名称？（D3.js第4版）

2 个答案:

显示已点击/悬停节点的名称？ （D3.js第4版）

2 个答案:

显示已点击/悬停节点的名称？（D3.js第4版）