d3js svg text selection by id

Question

I have implemented what I thought to be a relatively simple mouse-over behavior in d3, but I am clearly missing something, because I can't seem to figure out why it is not working.

The goal is to have a text blocks associated with an array of data points, and have the text block display when the user mouses over the data points. When the use clicks on the data point, the text block remains visible. I'm not using tooltips, as I need to display more than one text block at a time.

First, I am creating the text blocks in an svg using a wrapping function from Bostock himself ( 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);
      }
    }
  });
}

The blocks themselves are created using this function:

 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; });

The mouseover function of the data points (plotted as svg circles) looks like this. Note that the following is configured simply to turn on the visibility of #textBlock5 regardless of which circle is moused over; this is a debugging step just to remove the function from the select statement

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

The ids are being constructed properly in the DOM (see below), but the mouseover function is not changing the visibility attribute...can anyone help me identify what I'm doing wrong here!?

<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, birdspider. I cannot believe that I failed to see that...goes to show what value a good break would have done for me. Thanks for taking the time to give this a once-over and being so observant!!