Удаление текста при событии mouseout

Question

Небольшая проблема на одном из них. У меня есть гистограмма, и я хочу, чтобы она отображала текст в строке «mouseenter». Это прекрасно работает, но я хочу удалить этот текст в «mouseout», и я не могу понять его.

Большое вам спасибо за помощь! Attached: заинтересованная часть d3.js сценария

d3.selectAll("div.line") 
     .append("div") 
     .attr("class","bar") 
     .style("width", function(d){return d.occurrence /10 + "px"}) 
     .on("mouseenter", function(d) { 
      d3.select(this) 
      .append("text") 
      .text(function(d){return d.occurrence + " occurences"}); 
     }) 
     .on("mouseout", function(d) { 
      d3.select(this) 
      .select(".text").remove(); 
     }); 

Answer 1

В вашей кода, вы пытаетесь выбрать .text для мыши. Вы выбираете узлы, у которых есть класс: «текст», а не текстовые узлы. Удалите точку.

Я бы, вероятно, также изменил mouseout «select» на «selectall» на всякий случай, если вы пропустите событие mouseout и случайно добавите два текстовых узла.

Edit:

http://jsfiddle.net/QbGRE/

d3.select("div.line").selectAll("div.bar") 
    .data(data, function(d) { return d.id;  }) 
    .enter() 
    .append("div").attr("class","bar") 
    .style("width", function(d){return d.occurrence /10 + "px";}) 
    .on("mouseover", function(d) { 
     d3.select(this) 
     .append("text").style("pointer-events", "none") 
     .text(function(d){return d.occurrence + " occurences";}); 
    }) 
    .on("mouseout", function(d) { 
     d3.select(this) 
     .select("text").remove(); 
    }); 

Подчищен код.

1. "Mouseover/MouseOut" вместо "MouseEnter/MouseOut"
2. .Select ("текст") вместо ".text".
3. стиль («указатель-события», «нет) по тексту, чтобы остановить это вызывает дополнительные события мыши, когда он добавил.
4. Добавлены поддельные данные.

Answer 2

Самый простой способ сделать это, чтобы присвоить уникальный идентификатор для нового элемента текста и выберите, что:

.on("mouseenter", function(d) { 
     d3.select(this) 
     .append("text") 
     .attr("id", "myText") 
     .text(function(d){return d.occurrence + " occurences"}); 
    }) 
    .on("mouseout", function(d) { 
     d3.select("#myText").remove(); 
    });