Tengo un div que aparece tan pronto como hago clic en un rect (barra). Por el momento, mi div está desapareciendo tan pronto como salgo del rect. Pero quiero mostrarlo hasta que deje el div. ¿Cómo puedo hacer esto?

 var div = d3.select('body').append('div') .attr('class', 'tooltip-donut') .style('opacity', 0); rect.enter() .insert('rect', ':first-child') .on('click', function (d, i) { d3.select(this).transition() .duration('50') .attr('opacity', '.85'); // Makes the new div appear on hover: div.transition() .duration(50) .style('opacity', 1); div.html(['Taskname: ' + i.taskName, 'Start: ' + i.startDate.toLocaleTimeString(), 'Ende: ' + i.endDate.toLocaleTimeString()].join('<br/>')) .style('left', (d.pageX) + 'px') .style('top', (d.pageY - 15) + 'px'); }) .on('mouseout', function (d, i) { d3.select(this).transition() .duration('50') .attr('opacity', '1'); div.transition() .duration('50') .style('opacity', 0); })