d3 nav bar странное поведение при mouseout

Question

Я пытаюсь разработать навигационное меню d3 без использования обычного подхода li/ul. Пока у меня есть 2 уровня, и я использую события мыши, чтобы вызвать изменения. Тем не менее, первый цикл работает нормально, и родительские элементы становятся черными, после чего вещи начинают вести себя странно, и эта строка не выполняется; 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

Как уже упоминалось в комментариях, что вам нужно, чтобы стиль прямоугольник а не г элемента.

Обновлено скрипку: https://jsfiddle.net/thatOneGuy/djcc6kxq/1/

Кроме того, я переставил раскраска прямоугольникам, поэтому вы ранее были:

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, потому что вы больше не старше родителя, они получают Oved. Я бы просто создал структуру и спрятал сначала. Затем при наведении указателя мыши на родителя, показать дочерние элементы, то есть установите видимость на видимые и на мыши, установите видимость в скрытую. Просто сохраняет вас, удаляя, а затем воссоздавая элементы.