All examples By author By category About

lordliquid

Full window Github gist

let toolbar = svg.append('g');
    
    let links = ['Home', 'Menu Item 1', 'Menu Item 2', 'Menu Item 3'];
    
    function expandToolbar() {
    	let elem = d3.select(this);
      elem
        .transition()
        .duration(1000)
        .ease(d3.easeCircleOut)
        .attr('width', '20%')
        .attr('height', '100%')
      	.attr('z-index', 1);
      
      let textEnter = elem.selectAll('text')
      	.data(links)
      
      textEnter
      	.enter()
      	.append('text')
      	.text(t => t)
      	.attr('fill', 'white')
      	.attr('z-index', 1000)
      
    }
    
    function collapseToolbar() {
    	let elem = d3.select(this);      
      elem
        .transition()
        .duration(700)
        .ease(d3.easeCircleIn)
        .attr('width', '2%')
        .attr('height', '100%');
      
    }
    
    toolbar
    	.append('rect')
    	.attr('width', '2%')
    	.attr('height', '100%')
    	.on('mouseover', expandToolbar)
    	.on('mouseout', collapseToolbar)

</script>
</body>

https://d3js.org/d3.v4.min.js