通过将鼠标悬停在 D3.js 中的一个节点上来显示多个节点的工具提示答案

【问题标题】：Show tooltips of multiple node by hovering on a node in D3.js通过将鼠标悬停在 D3.js 中的一个节点上来显示多个节点的工具提示
【发布时间】：2017-08-03 02:53:56
【问题描述】：

使用 D3 示例 (1) 和 (2)，我在 D3 中创建了一个可折叠的树视图，其中树的每个节点在其工具提示中都有一些信息。

请看我的作品here。在树中，node1 和 node2 是可折叠/可展开的。扩展node2 将创建node4 和node5。

每个节点都在悬停时显示其工具提示（使用mouseover,mousemove,mouseout 事件）。每个节点都知道它的父节点和子节点。

现在，我的要求是：当节点 X 悬停时，从根到 X 的路径中所有节点的工具提示应该同时可见。

例如：当我应该悬停node4时，三个节点的工具提示：node1、node2和node4应该是可见的。

如何在我的示例中实现它？

【问题讨论】：

标签： javascript d3.js treeview mousemove mousehover

【解决方案1】：

我通过在节点悬停时创建一个具有工具提示的 div 来解决这个问题。

并递归调用其父级。

function mouseover(d) {
    var div = d3.select("body").append("div")
        .attr("class", "tooltip")
        .style("opacity", 1)
        .style("left", (d.y+120) + "px")
        .style("top", (d.x-20) + "px")
        .html(
            "<table style='font-size: 10px; font-family: sans-serif;' >"+
            "<tr><td>Name: </td><td>"+d.name+"</td></tr>"+
            "<tr><td>Value: </td><td>"+d.value+"</td></tr>"+
            "</table>"
        );
    if (d.parent) mouseover(d.parent);
}

在 mouseout 事件中，我调用了所有带有 tooptip 类的 div 并将它们删除。

function mouseout(d) {
    d3.select("body").selectAll('div.tooltip').remove();
}

在这里找到修改后的实现：https://bl.ocks.org/sushilverma208016/0e7d251e1651f7193b965c33edd0ca36

【讨论】：