title: d3.js: How to change a nodes' representation in a force-layout graph
body: <p>I am trying to expand <a href="http://bl.ocks.org/mbostock/4062045" rel="nofollow">this force layout example</a> by changing a nodes' shape from circle to rectangle when it is clicked. So I don't want to change any data but just want to replace the corresponding SVG element.</p>
  
  <p>One of my approaches looked like this:</p>
  
  <pre><code>     node.on("click", function() {
          this.remove();
          svg.selectAll(".node").data(graph.nodes).enter().append("rect")
                  .attr("class", "node")
                  .attr("width", 5).attr("height", 5)
                  .style("fill", function(d) { return color(d.group); });
      });
  </code></pre>
  
  <p>So I removed the SVG element from the DOM and rebound the data, adding a rectangle for the now missing node.</p>
  
  <p>Unfortunately this does not work (the force layout does not set any properties on the new element) and I have no idea if this a reasonable approach at all.</p>
  
  <p>Any ideas how to do this properly?</p>