d3.js: How to change a nodes' representation in a force-layout graph
<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>