d3導航欄在鼠標移出時的奇怪行爲

Question

我試圖在不使用正常li/ul方法的情況下開發d3導航菜單。到目前爲止，我有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

正如在評論中提到的那樣，您需要使用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); 
} 

說實話，我不會使用刪除，因爲當您嘗試mouseover 2級元素時，因爲您不再是父母，他們會得到rem Oved的。我會先創建結構並隱藏所有結構。然後在父代的鼠標懸停上，顯示兒童，即將可見性設置爲可見並且在鼠標懸停時，將可見性設置爲隱藏。只是保存你刪除，然後重新創建元素。