title: Inserting a line break in D3 force layout node labels
body: <p>So, I am playing with force directed graph, and I've made that .text on my node changes on mouse over to another text from data.</p>
  
  <p>My code looks like this:</p>
  
  <p>script:</p>
  
  <pre><code>var data = {"nodes":[
                          {"name":"YHO", "full_name":"Yahoo", "type":1, "slug": "www.yahoo.com", "entity":"company", "img_hrefD":"", "img_hrefL":""},
                          {"name":"GGL", "full_name":"Google", "type":2, "slug": "www.google.com", "entity":"company", "img_hrefD":"", "img_hrefL":""},
                          {"name":"BNG", "full_name":"Bing", "type":2, "slug": "www.bing.com", "entity":"company", "img_hrefD":"", "img_hrefL":""},
                          {"name":"YDX", "full_name":"Yandex", "type":2, "slug": "www.yandex.com", "entity":"company", "img_hrefD":"", "img_hrefL":""},
  
                          {"name":"Desc1", "type":4, "slug": "", "entity":"description"},
                          {"name":"Desc2", "type":4, "slug": "", "entity":"description"},
                          {"name":"Desc4", "type":4, "slug": "", "entity":"description"},
  
                          {"name":"CEO", "prefix":"Mr.", "fst_name":"Jim", "snd_name":"Bean", "type":3, "slug": "", "entity":"employee"},
                          {"name":"ATT", "prefix":"Ms.", "fst_name":"Jenna", "snd_name":"Jameson", "type":3, "slug": "", "entity":"employee"},
                          {"name":"CTO", "prefix":"Mr.", "fst_name":"Lucky", "snd_name":"Luke", "type":3, "slug": "", "entity":"employee"},
                          {"name":"CDO", "prefix":"Ms.", "fst_name":"Pamela", "snd_name":"Anderson", "type":3, "slug": "", "entity":"employee"},
                          {"name":"CEO", "prefix":"Mr.", "fst_name":"Nacho", "snd_name":"Vidal", "type":3, "slug": "", "entity":"employee"},
                      ], 
              "links":[
                          {"source":0,"target":4,"value":1,"distance":5},
                          {"source":0,"target":5,"value":1,"distance":5},
                          {"source":0,"target":6,"value":1,"distance":5},
  
                          {"source":1,"target":4,"value":1,"distance":5},
                          {"source":2,"target":5,"value":1,"distance":5},
                          {"source":3,"target":6,"value":1,"distance":5},
  
                          {"source":7,"target":3,"value":10,"distance":6},
                          {"source":8,"target":3,"value":10,"distance":6},
                          {"source":9,"target":1,"value":10,"distance":6},
                          {"source":10,"target":1,"value":10,"distance":6},
                          {"source":11,"target":2,"value":10,"distance":6},
                          ]
                 }    
  
  
  
      var w = 560,
          h = 500,
          radius = d3.scale.log().domain([0, 312000]).range(["10", "50"]);
  
      var vis = d3.select("body").append("svg:svg")
          .attr("width", w)
          .attr("height", h);
  
          //vis.append("defs").append("marker")
          //.attr("id", "arrowhead")
          //.attr("refX", 22 + 3) /*must be smarter way to calculate shift*/
          //.attr("refY", 2)
          //.attr("markerWidth", 6)
          //.attr("markerHeight", 4)
          //.attr("orient", "auto")
          //.append("path")
              //.attr("d", "M 0,0 V 4 L6,2 Z"); //this is actual shape for arrowhead
  
      //d3.json(data, function(json) {
          var force = self.force = d3.layout.force()
              .nodes(data.nodes)
              .links(data.links)
              .linkDistance(function(d) { return (d.distance*10); })
              //.friction(0.5)
              .charge(-250)
              .size([w, h])
              .start();
  
  
  
          var link = vis.selectAll("line.link")
              .data(data.links)
              .enter().append("svg:line")
              .attr("class", function (d) { return "link" + d.value +""; })
              .attr("x1", function(d) { return d.source.x; })
              .attr("y1", function(d) { return d.source.y; })
              .attr("x2", function(d) { return d.target.x; })
              .attr("y2", function(d) { return d.target.y; })
              .attr("marker-end", function(d) {
                                                  if (d.value == 1) {return "url(#arrowhead)"}
                                                  else    { return " " }
                                              ;});
  
  
          function openLink() {
              return function(d) {
                  var url = "";
                  if(d.slug != "") {
                      url = d.slug
                  } //else if(d.type == 2) {
                      //url = "clients/" + d.slug
                  //} else if(d.type == 3) {
                      //url = "agencies/" + d.slug
                  //}
                  window.open("//"+url)
              }
          }
  
  
  
  
          var node = vis.selectAll("g.node")
              .data(data.nodes)
            .enter().append("svg:g")
              .attr("class", "node")
              .call(force.drag);
  
  
          node.append("circle")
              .attr("class", function(d){ return "node type"+d.type})
              .attr("r",function(d){if(d.entity == "description"){ return 6 } else { return 18 }})
              //.on("mouseover", expandNode);
              //.style("fill", function(d) { return fill(d.type); })
  
  
  
          node.append("svg:image")
              .attr("class", function(d){ return "circle img_"+d.name })
              .attr("xlink:href", function(d){ return d.img_hrefD})
              .attr("x", "-36px")
              .attr("y", "-36px")
              .attr("width", "70px")
              .attr("height", "70px")
              .on("click", openLink())
              .on("mouseover", function (d) { if(d.entity == "company")
                                                  {
                      d3.select(this).attr("width", "90px")
                                      .attr("x", "-46px")
                                      .attr("y", "-36.5px")
                                     .attr("xlink:href", function(d){ return d.img_hrefL});                           
                                                  }
                  })
              .on("mouseout", function (d) { if(d.entity == "company")
                                              {
                      d3.select(this).attr("width", "70px")
                                      .attr("x", "-36px")
                                      .attr("y", "-36px")
                                     .attr("xlink:href", function(d){ return d.img_hrefD});
                                              }
                  });    
  
  
          node.append("svg:text")
              .attr("class", function(d){ return "nodetext title_"+d.name })
              .attr("dx", 0)
              .attr("dy", ".35em")
              .style("font-size","10px")
              .attr("text-anchor", "middle")
              .style("fill", "white")
              .text(function(d) { if (d.entity != "description"){return d.name} });
  
  
          node.on("mouseover", function (d) {
              if (d.entity == "company"){   
                  d3.select(this).select('text')
                      .transition()
                      .duration(300)
                      .text(function(d){
                              return d.full_name;
                          })
                      .style("font-size","15px")
  
              }
              else if(d.entity == "employee"){
                  d3.select(this).select('text')
                      .transition()
                      .duration(300)
                      .text(function(d){return d.prefix + ' ' + d.fst_name + ' ' + d.snd_name})
                      .style("font-size","8px")   
  
              }
              else {
                  d3.select(this).select('text')
                      .transition()
                      .duration(300)
                      .style("font-size","15px")
              }
  
              if (d.entity == "company") {
                  d3.select(this).select('image')
                      .attr("width", "90px")
                      .attr("x", "-46px")
                      .attr("y", "-36.5px")
                      .attr("xlink:href", function (d) {
                          return d.img_hrefL
                          });               
              }
  
              if (d.entity == "company") {
  
                  d3.select(this).select('circle')
                                  .transition()
                                  .duration(300)
                                  .attr("r",28)
  
              }
              else if (d.entity == "employee"){
                  d3.select(this).select('circle')
                                  .transition()
                                  .duration(300)
                                  .attr("r",32)
              }
          })
  
  
           node.on("mouseout", function (d) {
              if (d.entity == "company") {
                  d3.select(this).select('text')
                      .transition()
                      .duration(300)
                      .text(function(d){return d.name;})
                      .style("font-size","10px")
                  }
              else if(d.entity == "employee"){
                  d3.select(this).select('text')
                      .transition()
                      .duration(300)
                      .text(function(d){return d.name;})
                      .style("font-size","10px")  
  
              }
              else {
                  d3.select(this).select('text')
                      .transition()
                      .duration(300)
                      .style("font-size","10px")
              }
  
  
               if (d.entity == "company") {
                  d3.select(this).select('image')
                      .attr("width", "70px")
                      .attr("x", "-36px")
                      .attr("y", "-36px")
                      .attr("xlink:href", function (d) {
                      return d.img_hrefD
                  });
              }
  
              if (d.entity == "company" || d.entity == "employee") {
  
                  d3.select(this).select('circle')
                                  .transition()
                                  .duration(300)
                                  .attr("r",18)
              }
  
          });
  
          force.on("tick", function() {
            link.attr("x1", function(d) { return d.source.x; })
                .attr("y1", function(d) { return d.source.y; })
                .attr("x2", function(d) { return d.target.x; })
                .attr("y2", function(d) { return d.target.y; });
  
            node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
          });
      //});
  </code></pre>
  
  <p>You can see working example in my jsfiddle: <a href="http://jsfiddle.net/dzorz/6pHkn/" rel="nofollow">http://jsfiddle.net/dzorz/6pHkn/</a></p>
  
  <p>The part of code which bothers me is that mouseover:</p>
  
  <pre><code>else if(d.entity == "employee"){
  
       d3.select(this).select('text')
                  .transition()
          .duration(300)
          .text(function(d){return d.prefix + ' ' + d.fst_name + ' ' + d.snd_name})
          .style("font-size","8px")   
  
  }
  </code></pre>
  
  <p>I wanna add a line break between <code>d.fst_name</code> and <code>d.snd_name</code> and I tried with <code>'\n'</code> and <code>'&lt;\br&gt;'</code> and it was not doing what I wanted to get...</p>
  
  <p>Which is the way in d3 to add line break on text?</p>
  
  <p>You can edit my linked jsfiddle above...</p>
  
  <p>Any suggestion is welcome</p>