title: d3.js graph not displaying on asp.net page
body: <p>As the title says, i cant get the graph to display within the "MainContent" placeholder on my asp.NET page. If  i change the select from "MainContent" to "body" then the graph does display at the bottom of the page. </p>
  
  <p>Code snippet:</p>
  
  <blockquote>
    <p>var w = 960,
                h = 500,
                r = 30,
                fill = d3.scale.category20();</p>
  
  <pre><code>    var force = d3.layout.force()
          .charge(-120)
          .linkDistance(60)
          .size([w, h]);
  
      var svg = d3.select("body").append("svg:svg")
          .attr("width", w)
          .attr("height", h);
  
      d3.json("graph.json", function (json) {
          var link = svg.selectAll("line")
              .data(json.links)
            .enter().append("svg:line");
  
          var node = svg.selectAll("g myCircleText")
            .data(json.nodes)
  
          var elemEnter = node.enter()
            .append("g")
  
          elemEnter.append("text")
            //.attr("dx", function (d) { return -20 })
            .text(function (d) { return d.name })
  
          var circle = elemEnter.append("circle")
            .attr("r", r)
            .style("fill", function (d) { return fill(d.group); })
              .style("stroke", function (d) { return d3.rgb(fill(d.group)).darker(); })
              .call(force.drag);
  
          force
              .nodes(json.nodes)
              .links(json.links)
              .on("tick", tick)
              .start();
  
          function tick(e) {
  
              // Push sources up and targets down to form a weak tree.
              var k = 6 * e.alpha;
              json.links.forEach(function (d, i) {
                  d.source.y -= k;
                  d.target.y += k;
              });
  
              circle.attr("cx", function (d) { return d.x; })
                  .attr("cy", function (d) { return d.y; });
  
              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; });
          }
      });`
  </code></pre>
  </blockquote>
  
  <p>I can't get text to display on each node either, i have done quite a bit of searching but have yet to solve either issue.</p>
  
  <p><strong>UPDATE:</strong>
  I have managed to get text to display within my graph. However the text does not display within the circle, rather it displays in the top left corner of the svg container. I have updated the code snippet to reflect this.</p>
  
  <p><strong>UPDATE 2:</strong>
  I now have the graph displaying in its correct position. The solution was as simple as placing the script within a div, and then selecting said div within the script. I still have not figured out how to display the text within a circle.</p>