title: Hide text elements and make text wrap in d3js app
body: <p>So I have the following code to visualize a tree using the d3js library. My problem lies in the nodeEnter.append("text") portion for actually assigning the text value. For some reason it won't register that I've put a newline \n character in my text assignment because the text doesn't go to a newline in the rendering of the svg. Also, I want my text to be hidden normally and appear on mouseover; however, this doesn't work. Instead I managed to get the opposite functionality to work (hide on mouseover). Can somebody tell me how to get the mouseover funcitonality I want, and how to make the "\n" character actually send the remainder of the text to a newline?</p>
  
  <p>TY</p>
  
  <pre><code>  nodeEnter.append("text")
    .attr("x", function(d) { return d.children || d._children ? -10 : 10; })
    .attr("dy", ".35em")
    .attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; })
    .text(function(d) { return d.name+"\n"+d.text; })
    .style("fill-opacity", 1e-6)
    .style("visibility","visible")
    .on("mouseenter", function(){d3.select(this)
      .style("visibility", "hidden")
      .transition()                      
      ;})
    .on("mouseleave", function(){d3.select(this)
      .style("visibility", "visible")
      .transition()                      
      ;});
  </code></pre>
  
  <p>(Basically wherever it has visibility set to visible I want it hidden, and wherever it is hidden I want it visible)</p>