如何设置悬停状态以显示/隐藏菜单项

Question

d3 navigation menu 的工作正在进行中：

thatOneGuy 建议我为 2 级设置悬停状态以保持 2 级矩形可见，这样它们在 1 秒后不会隐藏，但我需要一些帮助才能开始。如何设置悬停状态？

代码sn-p：

lvl2 = svg.selectAll(".lvl2")
                     .data(data2, function (d) { return d.name; });

       gEnter2 = lvl2.enter()
           .append("g")
           .attr("class", "lvl2")
            .style("fill", function (d, i) { return "url(#gradA" + d.id + ")"; })
         .attr("id", function (d, i) { return d.id; })
         .on('mouseenter', lighten)
         .on('mouseleave', darken)
           .attr("transform", function (d, i) { return "translate(" + d.x + "," + 0 + ")"; })
           .style("visibility", "hidden");

Answer 1

这是一个可接受的替代方案：https://jsfiddle.net/sjp700/3stdk6L6/2/

 var tree = d3.layout.tree().nodeSize([70, 40]);
    var diagonal = d3.svg.diagonal()
        .projection(function (d) {
            return [d.x + rectW / 2, d.y + rectH / 2];
        });