title: How do I remove all children elements from a node and then apply them again with different color and size?
body: <p>So I have the next force layout graph code for setting nodes, links and other elements:</p>
  
  <pre><code>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; });
  };
  </code></pre>
  
  <p>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.</p>
  
  <p>I can do this:</p>
  
  <pre><code>visualRoot.selectAll(".circle").remove();
  </code></pre>
  
  <p>but I have all the images that I attached to <code>'.circles'</code> still there.</p>
  
  <p>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>
  
  <p>P.S. what is the difference between <code>graphData.nodes</code>  and <code>d3.selectAll('.nodes')</code>?</p>