title: d3 nav bar strange behaviour on mouseout
body: <p>I'm trying to develop a d3 navigation menu without using the normal li/ul approach.  So far I have 2 levels and I'm using mouse events to trigger the changes.  However, the first cycle works okay and the parent items go black on mouseout thereafter things start behaving oddly and this line doesn't execute;   svg.selectAll(".lvl1").attr("fill", "black"); but the remove() process works.  Have I missed something or is it hanging on an event?  Any ideas that will help extend this approach to level 3 would also be appreciated. <a href="https://jsfiddle.net/sjp700/djcc6kxq/" rel="nofollow">https://jsfiddle.net/sjp700/djcc6kxq/</a></p>
  
  <pre><code>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);    
      }
  </code></pre>