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

时间:2016-09-02 10:05:23

标签: css d3.js svg

d3 navigation menu

正在进行中

thatOneGuy建议我将等级2的悬停状态设置为保持2级直观可见,这样他们在1秒后就不会隐藏但我需要一些帮助才能开始。如何设置悬停状态?

代码段:

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

1 个答案:

答案 0 :(得分:0)

以下是可接受的替代方案: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];
        });