title: How to add HTML code to D3 tree chart at node?
body: <p>I'm using <a href="http://bl.ocks.org/robschmuecker/7880033" rel="noreferrer">D3.js tree charts</a> </p>
  
  <p>Here, I want to add HTML code to show more data and apply anchor link on each text "<strong>tickets</strong>" and "<strong>events</strong>". </p>
  
  <p><a href="https://jsbin.com/wecexix/edit?js,output" rel="noreferrer">This is my jsbin</a> </p>
  
  <p>I'm expecting result should be shown in an image, add text like "<strong>tickets</strong>" and "<strong>events</strong>" and apply anchor link on that text</p>
  
  <p><a href="https://i.stack.imgur.com/272L4.png" rel="noreferrer"><img src="https://i.stack.imgur.com/272L4.png" alt="enter image description here"></a></p>
  
  <p>You can see that image, that tells what I expecting. I want to append text like that and add an anchor link on it. each node has 2 texts as I mentioned in this image. </p>
  
  <p>Here my code</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta name="viewport" content="width=device-width"&gt;
    &lt;title&gt;JS Bin&lt;/title&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="//d3js.org/d3.v3.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="tree-container"&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.node {
    cursor: pointer;
  }
  
  .overlay{
      background-color:#EEE;
  }
  
  .node circle {
    fill: #fff;
    stroke: steelblue;
    stroke-width: 1.5px;
  }
  
  .node text {
    font-size:10px; 
    font-family:sans-serif;
  }
  
  .link {
    fill: none;
    stroke: #ccc;
    stroke-width: 1.5px;
  }
  
  .templink {
    fill: none;
    stroke: red;
    stroke-width: 3px;
  }
  
  .ghostCircle.show{
      display:block;
  }
  
  .ghostCircle, .activeDrag .ghostCircle{
       display: none;
  }
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code> node.select('text')
              .attr("x", function(d) {
                  return d.children || d._children ? -10 : 10;
              })
              .attr("text-anchor", function(d) {
                  return d.children || d._children ? "end" : "start";
              })
              .text(function(d) {
                  return d.name;
              }).html(function(d) {
                  return "&lt;p&gt;"+d.name+"&lt;/p&gt;";
              });
  </code></pre>
  
  <p>if you need a full code please <a href="https://jsbin.com/wecexix/edit?js,output" rel="noreferrer">go here</a></p>