Скрытие всплывающей подсказки с переходом в d3

Question

Я новичок в d3 и программировании в целом, и я делаю график социальной сети с некоторыми подсказками. Предполагается, что всплывающая подсказка появляется, когда кто-то наводит курсор на узел, а затем исчезает и скрывается при удалении мыши. Мне удалось заставить подсказку исчезать с переходом, но подсказка на самом деле все еще там, просто невидима, так что окно и текст иногда скрывают другие узлы, делая так, что вы не можете успешно парить над частями других узлов и вызвать другие подсказки. Когда код просто node.on('mouseout', tip.hide);работает нормально, но не имеет переходов.

Вот скрипка Эффект, о котором я говорю, там не так часто встречается, как в обычном браузере. http://jsfiddle.net/wPLB5/

      node.on('mouseover', tip.show); 
      node.on('mouseout', function() { 
          d3.select(".d3-tip")
          .transition()
          .delay(100)
          .duration(500)
          .style("opacity",0);
          tip.hide;
         }); 
      //node.on('mouseout', tip.hide); //This is the original line.

Редактировать:

Я понял. Мне нужно было добавить другой стиль, о котором я не знал. Вот фиксированный код:

  node.on('mouseout', function() {
      d3.select(".d3-tip")
      .transition()
        .delay(100)
        .duration(600)
        .style("opacity",0)
        .style('pointer-events', 'none')
      });

Answer 1

Я понял. Мне нужно было добавить стиль указателя событий. Вот фиксированный код:

  node.on('mouseout', function() {
      d3.select(".d3-tip")
      .transition()
        .delay(100)
        .duration(600)
        .style("opacity",0)
        .style('pointer-events', 'none')
      });

Answer 2

Вы можете попробовать два подхода, используя подсказку div или заголовок svg.

 node.append("svg:title")
   .text(function(d) { return "Location:" + " " + d.location + 
      "\nFloruit Date:" + " " + d.floruitDate; });

Также, возможно, этот ответ будет вам полезен D3: показать данные о наведении курсора на кружок.