title: Showing Multiline text using d3.js
body: <p>Earlier i was appending .text element to g  tag to show the text. But now as length of text is more than one line i am trying to follow below example and put div in g tag.</p>
  
  <p>But it's not working Below is the Code. Am i missing something?.</p>
  
  <pre><code>  var width = 960,
      height = 500;
      var w=300,h=300;
  
      var svg = d3.select("body").append("svg")
      .attr("width", width)
      .attr("height", height)
  
      d3.json("data.json", function (json) {
          /* Define the data for the circles */
          var elem = svg.selectAll("g myCircleText")
          .data(json.nodes)
  
          /*Create and place the "blocks" containing the circle and the text */
          var elemEnter = elem.enter()
          .append("g")
          .attr("transform", function (d) { return "translate(" + d.x + ",180)" })
  
          /*Create the circle for each block */
          var circle = elemEnter.append("circle")
          .attr("r", function (d) { return d.r })
          .attr("stroke", "black")
          .attr("fill", "white")
          .style("fill", "url(#image)")
  
  
  
          .on("click", function (d) {
  
              var g = svg.append("g")
              .attr("transform", "translate(150,100)");
  
              g.append("rect")
            .attr("width", 200)
            .attr("height", 100)
            .style("fill", "#E6EFFA")
  
  
            .transition()
             .duration(750)
            .attr("width", 500)
            .attr("height", 400)
            .each("end", function () {
  
                var tempcircle = g.append("circle")
             .attr("r", "50")
             .attr("stroke", "black")
             .attr("fill", "blue")
             .style("fill", "url(#image)");
  
                g.append("text")
               .attr("dx", "200")
               .attr("dy", "30")
                  .text(d.label);
  
                var templine = g.append("line")
                .attr("x1", 20)
                .attr("y1", 50)
                .attr("x2", 450)
                .attr("y2", 50)
                .attr("stroke-width", 2)
                .attr("stroke", "white");
  
                g.append("text")
               .attr("dx", "180")
               .attr("dy", "80")
                  .text(d.info);
  
  
                g.append("text")
             .attr("dx", "120")
             .attr("dy", "120")
             .style("font-weight", "bold")
             .text(d.first);
  
                g.append("div")
               .attr("id", "div_01")
               .style({ width: w + "px", height: h + "px" })
               .attr("dx", "150")
               .attr("dy", "150")
               .text(d.Answer);
  
                g.append("text")
             .attr("dx", "120")
             .attr("dy", "170")
             .style("font-weight", "bold")
             .text(d.second);
  
                g.append("text")
               .attr("dx", "150")
               .attr("dy", "190")
               .text(d.A2);
  
                g.append("text")
             .attr("dx", "120")
             .attr("dy", "220")
             .style("font-weight", "bold")
             .text(d.third);
  
                g.append("text")
               .attr("dx", "150")
               .attr("dy", "240")
               .text(d.A3);
  
                var templine1 = g.append("line")
                .attr("x1", 20)
                .attr("y1", 270)
                .attr("x2", 450)
                .attr("y2", 270)
                .attr("stroke-width", 2)
                .attr("stroke", "white");
  
                g.append("circle")
               .attr("r", "15")
               .attr("cx", "505")
               .attr("cy", "6")
               .style("fill", "#B5CEE7")
  
             .on('click', function () {
                 d3.selectAll("rect").remove();
                 d3.selectAll("text").remove();
                 d3.select(this).remove();
                 tempcircle.remove();
                 templine.remove();
                 templine1.remove();
  
             })
  
                g.append("text")
             .attr("dx", "500")
             .attr("dy", "8")
             .text("x");
            })
  
          });
      })
  </code></pre>
  
  <p>There is a div appending to g tag. </p>
  
  <p><a href="http://bl.ocks.org/JohnDelacour/5676636" rel="nofollow">http://bl.ocks.org/JohnDelacour/5676636</a></p>
  
  <p>is the example i am trying to follow.</p>
  
  <p>Thanks</p>