d3js svg выбор текста по id

Question

Я реализовал то, что я считал относительно простым поведением мыши в d3, но я явно чего-то не вижу, потому что я не могу понять, почему он не работает.

Цель состоит в том, чтобы иметь текстовые блоки, связанные с массивом точек данных, и отображать текстовый блок, когда пользователь перебирает точки данных. Когда использование нажимает на точку данных, текстовый блок остается видимым. Я не использую всплывающие подсказки, так как мне нужно отображать более одного текстового блока за раз.

Во-первых, я создаю текстовых блоков в SVG с помощью функции оборачивания из Босток себя (http://bl.ocks.org/mbostock/7555321)

function wrap(text, width, xLoc, yLoc) { 
    text.each(function() { 
    var text = d3.select(this), 
     words = text.text().split(/\s+/).reverse(), 
     word, 
     line = [], 
     lineNumber = 0, 
     lineHeight = 1.0, // ems 
     y = text.attr("y"), 
     //dy = parseFloat(text.attr("dy")), 
     dy = 0, 
     tspan = text.text(null).append("tspan").attr("x", xLoc).attr("y", y).attr("dy", dy + "em"); 
    while (word = words.pop()) { 
     line.push(word); 
     tspan.text(line.join(" ")); 
     if (tspan.node().getComputedTextLength() > width) { 
     line.pop(); 
     tspan.text(line.join(" ")); 
     line = [word]; 
     tspan = text.append("tspan").attr("x", xLoc).attr("y", y).attr("dy", ++lineNumber * lineHeight + dy + "em").text(word); 
     } 
    } 
    }); 
} 

Блоки сами, созданные с помощью этой функции:

svgContainer.selectAll("text") 
    .data(data) 
    .enter() 
    .append("text") 
     .attr("x", function(d) { return d.x_axis; }) 
     .attr("y", function(d) { return d.y_axis; }) 
     .attr("id", function(d) {return("textBlock" + d.documentNumber);}) 
     .attr("visibility", "visible") 
     .text(function(d) { return d.description;}); 
     .call(wrap, 200, function(d) { return d.x_axis; }, function(d) { return d.y_axis; }); 

курсора, находящегося функция точек данных (построенная как круги SVG) выглядит следующим образом. Обратите внимание, что следующее настроено просто для того, чтобы включить видимость # textBlock5 независимо от того, какой круг затушевывается; это шаг отладки просто удалить функцию из select заявления

svgContainer.selectAll("circle") 
     .data(data) 
     .on("mouseover", function(d){ 
      return console.log("#textBlock"+d.documentNumber); 
      d3.select("#textBlock5").attr("visibility", "visible"); 
      }); 

Идентификаторы строится должным образом в DOM (см ниже), но функция Mouseover не изменяет атрибут видимости ... может кто-нибудь помогите мне определить, что я делаю неправильно здесь !?

<text x="927.1563942727792" y="673.2598605856803" id="textBlock5" visibility="visible"> 
<tspan x="927.1563942727792" y="673.2598605856803" dy="0em">text here</tspan> 
//more tspans here... 
</text> 

Answer 1

OMG, birdpider. Я не могу поверить, что я не видел этого ... идет показать, какое значение хороший перерыв сделал бы для меня. Спасибо, что нашли время, чтобы дать это один раз и быть таким наблюдательным !!