title: d3 js nodes are out of the window
body: <p>using d3.js to visualize 50 nodes and their links, some of the nodes doesn't appear within the window (they are out of screen) - unless I drag them in:
  <a href="https://i.stack.imgur.com/ElvlK.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ElvlK.jpg" alt="enter image description here"></a>
  This is my code, any suggestion how to make all the nodes appear on load? :</p>
  
  <pre><code>var width = window.innerWidth;
  var height = window.innerHeight - 100;
  
  var svg = d3.select("#sharedActivityGraph")
      .append("svg")
      .attr("width", width)
      .attr("height", height);
  
   var simulation = d3.forceSimulation()
      .force("link", d3.forceLink())
      .force("charge", d3.forceManyBody().strength(-600))
      .force("center", d3.forceCenter(width / 2, height / 2));
  
  
  var links = svg.selectAll("foo")
      .data(gSharedActivityGraphEdges)
      .enter()
      .append("line")
      .style("stroke", "#ccc")
      .style("stroke-width", function (e) { return e.width });
  
  var color = d3.scaleOrdinal(d3.schemeCategory20);
  
  var node = svg.selectAll("foo")
      .data(gSharedActivityGraphNodes)
      .enter()
      .append("g")
      .call(d3.drag()
          .on("start", dragstarted)
          .on("drag", dragged)
          .on("end", dragended));
  
  node.on('mouseover', function (d) {
         console.log(d);
         SharedActivityShowInfo(d);
  
         node.filter(function (d1) { return (d !== d1
         &amp;&amp; d1.adjacents.indexOf(d.id) == -1);
         }).select("image").style("opacity", 0.2);
         node.filter(function (d1) { return (d == d1
         || d1.adjacents.indexOf(d.id) !== -1);
         }).select("image").style("opacity", 1);
      })
      .on('mouseout', function () {
         SharedActivityHideInfo();
          node.select("image").style("opacity", 1);
      });
  
  var nodeCircle = node.append("circle")
      .attr("r", function (d) { return 0.5 * Math.max(d.width, d.height) })
      .attr("stroke", "gray")
      .attr("stroke-width", "2px")
      .attr("fill", "white");
  
  var nodeImage = node.append("image")
          .attr("xlink:href", function (d) { return d.image })
          .attr("height", function (d) { return d.height + "" })
          .attr("width", function (d) { return d.width + "" })
          .attr("x", function (d) {return -0.5 * d.width })
          .attr("y", function (d) {return -0.5 * d.height })
          .attr("clip-path", function (d) { return "circle(" + (0.48 * Math.max(d.width, d.height)) + "px)"});
  
  simulation.nodes(gSharedActivityGraphNodes);
  simulation
      .force("link")
      .links(gSharedActivityGraphEdges);
  
  simulation.on("tick", function() {
      links.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 + ")"});
  });
  
  function dragstarted(d) {
      if (!d3.event.active) simulation.alphaTarget(0.3).restart();
      d.fx = d.x;
      d.fy = d.y;
  }
  
  function dragged(d) {
      d.fx = d3.event.x;
      d.fy = d3.event.y;
  }
  
  function dragended(d) {
      if (!d3.event.active) simulation.alphaTarget(0);
      d.fx = null;
      d.fy = null;
  }
  </code></pre>