title: How does D3 node selection work in D3 force graph?
body: <p>I'm trying to create a force graph and inserting foreignObject for each node.</p>
  
  <pre><code>    simulation
              .nodes(graph.nodes)
              .on("tick", ticked)
              .on("end", graphended);
  
         var node   = svg.append("g")
                      .attr("class", "nodes")
                      .selectAll("circle")
                      .data(graph.nodes)
                      .enter().append("foreignObject")
                                   .attr("width",img_w)
                                   .attr("height",img_h)
                              .append("xhtml:body")
                              .html(function(d){ 
                                  return '&lt;span class="custom-icon-container-circle"&gt;Some sample content&lt;/span&gt;';
                              })
                              .call(d3.drag()
                                      .on("start", dragstarted)
                                      .on("drag", dragged)
                                      .on("end", dragended));
  </code></pre>
  
  <p>and in TICK function I've following way to assign <code>x</code> and <code>y</code> coordinates.</p>
  
  <pre><code>function ticked() {
              node
                  .attr("x", function(d) {
                      var xPos = findPosX(d.x, img_w);
                      return xPos-img_w/2;
                  })
                  .attr("y", function(d) {
                      var yPos = findPosY(d.y, img_h);
                      return yPos-img_h/2;
                  });
          }
  </code></pre>
  
  <p>But in this tick method, instead of giving <code>x</code> and <code>y</code> Position to <code>foreignObject</code> it is assigning position to <code>body</code> element inside the foreignObject, which is making the node not position at actual coordinates.</p>
  
  <p>Now, the code does work (if I remove foreignObject and place another element tag and the position is given to that element), so I think there is a problem in my selector and append statement that creates <code>foreignObject</code> above, as it is selecting inside body of the element.</p>