How do I remove all children elements from a node and then apply them again with different color and size?

Question

So I have the next force layout graph code for setting nodes, links and other elements:

var setLinks = function () {     link = visualRoot.selectAll("line.link")         .data(graphData.links)         .enter().append("svg:line")         .attr("class", "link")         .style("stroke-width", function (d) { return nodeStrokeColorDefault; })         .style("stroke", function (d) { return fill(d); })         .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; });      graphData.links.forEach(function (d)     {         linkedByIndex[d.source.index + "," + d.target.index] = 1;     }); };   var setNodes = function () {     node = visualRoot.selectAll(".node")         .data(graphData.nodes)         .enter().append("g")         .attr("id", function (d) { return d.id; })         .attr("title", function (d) { return d.name; })         .attr("class", "node")         .on("click", function (d, i) { loadAdditionalData(d.userID, this); })         .call(force.drag)         .on("mouseover", fadeNode(.1)).on("mouseout", fadeNode(1)); };  //append the visual element to the node var appendVisualElementsToNodes = function () {     node.append("circle")         .attr("id", function (d) { return "circleid_" + d.id; })         .attr("class", "circle")         .attr("cx", function (d) { return 0; })         .attr("cy", function (d) { return 0; })         .attr("r", function (d) { return getNodeSize(d); })         .style("fill", function (d) { return getNodeColor(d); })         .style("stroke", function (d) { return nodeStrokeColorDefault; })         .style("stroke-width", function (d) { return nodeStrokeWidthDefault; });      //context menu:     d3.selectAll(".circle").on("contextmenu", function (data, index)     {         d3.select('#my_custom_menu')           .style('position', 'absolute')           .style('left', d3.event.dx + "px")           .style('top', d3.event.dy + "px")           .style('display', 'block');          d3.event.preventDefault();     });     //d3.select("svg").node().oncontextmenu = function(){return false;};      node.append("image")         .attr("class", "image")         .attr("xlink:href", function (d) { return d.profile_image_url; })//"Images/twitterimage_2.png"         .attr("x", -12)         .attr("y", -12)         .attr("width", 24)         .attr("height", 24);      node.append("svg:title")         .text(function (d) { return d.name + "\n" + d.description; }); }; 

Now, the colors and size dependencies changed and I need to redraw the graph circles (+all appended elements) with different color and radius. Having problem with it.

I can do this:

visualRoot.selectAll(".circle").remove(); 

but I have all the images that I attached to '.circles' still there.

In any way, any help will be appreciated, let me know if the explanation is not clear enough, I will try to fix it.

P.S. what is the difference between graphData.nodes and d3.selectAll('.nodes')?

Answer 1

Your answer will work, but for posterity, these methods are more generic.

Remove all children from HTML:

d3.select("div.parent").html(""); 

Remove all children from SVG/HTML:

d3.select("g.parent").selectAll("*").remove(); 

The .html("") call works with my SVG, but it might be a side effect of using innerSVG.