Question

我正在尝试开发d3导航菜单而不使用普通的li / ul方法。到目前为止，我有2个级别，我正在使用鼠标事件来触发更改。但是，第一个循环工作正常，并且父项在mouseout上变黑，此后事情开始表现得很奇怪而且这条线没有执行; svg.selectAll（“。lvl1”）。attr（“fill”，“black”）;但remove（）过程有效。我错过了什么或是否挂在活动上？任何有助于将此方法扩展到第3级的想法也将受到赞赏。 https://jsfiddle.net/sjp700/djcc6kxq/

lvl2.selectAll(".band")
        .attr("width", function (d) { return d.width; })
        .attr("height", 18)
        .style("opacity", .5) // set the element opacity
        .style("stroke", "black")
        .attr("class", "tbd")
        .style("cursor", "move")
        .on('mouseover', over2)
        .on('mouseout', out)
        .attr("link", function (d) { return d.link; });    
    }


    function out() {
        var t = d3.select(this);
        t.attr("fill", "pink")
        setTimeout(function () {
        svg.selectAll(".lvl2").remove();
        svg.selectAll(".lvl1").attr("fill", "black");
        }, 2000);    
    }

Answer 1

如评论中所述，您需要设置rect的样式而不是g元素。

更新了小提琴：https://jsfiddle.net/thatOneGuy/djcc6kxq/1/

另外，我重新安排了rects的颜色，所以之前你有：

function out() {
  var t = d3.select(this);
  t.attr("fill", "pink")
  //setTimeout(function() {
    svg.selectAll(".lvl2").remove();
    svg.selectAll(".lvl1 rect").attr("fill", "black");
 // }, 2000);
}

但是要将其更改为此选项以使最后选择的选项卡保持粉红色：

function out() {

  //setTimeout(function() {
  svg.selectAll(".lvl2").remove();
  svg.selectAll(".lvl1 rect").attr("fill", "black");

  var t = d3.select(this);
  t.attr("fill", "pink")
    // }, 2000);
}

老实说，当你尝试鼠标悬停在2级元素上时，我不会使用删除，因为你不再在父母身上，他们会被删除。我只是创建结构并首先隐藏所有内容。然后在父项的鼠标悬停时，显示子项，即将可见性设置为可见和鼠标输出，将可见性设置为隐藏。只需保存您删除然后重新创建元素。

d3导航条在mouseout上的奇怪行为

1 个答案: