如何从节点中删除所有子元素，然后再以不同的颜色和大小应用它们？
所以我有下一个强制布局graphics代码来设置节点，链接和其他元素：
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; }); }; 现在，颜色和大小的依赖关系发生了变化，我需要用不同的颜色和半径重绘图圈（+所有附加元素）。 有问题的。
我可以做这个：
visualRoot.selectAll(".circle").remove();
但是我仍然在那里附上所有的'.circles'图片。
无论如何，任何帮助将不胜感激，让我知道如果解释不够清楚，我会尝试修复它。
PS graphData.nodes和d3.selectAll('.nodes')之间有什么区别？
你的答案会起作用，但是对于后代来说，这些方法更通用。
从HTML中删除所有的孩子：
d3.select("div.parent").html("");
从SVG / HTML中删除所有的孩子：
d3.select("g.parent").selectAll("*").remove();
.html("")调用与我的SVG协同工作，但这可能是使用innerSVG的副作用 。
我的第一个build议是，你应该阅读关于select的d3.js API： https ： //github.com/mbostock/d3/wiki/Selections
您必须了解enter()命令是如何工作的（ API ）。 事实上，你必须使用它来处理新的节点有一个意义，这将有助于你。
在处理selection.data()时，以下是基本的过程：
-
首先你要“附加”一些数据到select。 所以你有了：
var nodes = visualRoot.selectAll(".node") .data(graphData.nodes) -
然后你可以修改所有的节点每次数据改变（这将做你想要的）。 例如，如果更改您加载的新数据集中旧节点的半径
nodes.attr("r", function(d){return d.radius}) -
然后，你必须处理新的节点，为此你必须select新的节点，这就是
selection.enter()的作用：var nodesEnter = nodes.enter() .attr("fill", "red") .attr("r", function(d){return d.radius}) -
最后你肯定要删除不再需要的节点，要做到这一点，你必须select它们，这就是
selection.exit()所做的。var nodesRemove = nodes.exit().remove()
整个过程的一个很好的例子也可以在API维基上find： https : //github.com/mbostock/d3/wiki/Selections#wiki-exit
这样我就很容易解决了，
visualRoot.selectAll(".circle").remove(); visualRoot.selectAll(".image").remove();
然后我只是重新添加了视觉元素，因为用于计算半径和颜色的代码已经改变了属性，所以呈现出不同的视觉元素。 谢谢。
从节点中删除所有元素：
var siblings = element.parentNode.childNodes; for (var i = 0; i < siblings.length; i++) { for (var j = 0; j < siblings.length; j++) { siblings[i].parentElement.removeChild(siblings[j]); } }`
如果你想删除元素本身，就像你一样使用element.remove() 。 如果你只是想删除元素的内容，但保持原样，你可以使用f.ex.
visualRoot.selectAll(".circle").html(null); visualRoot.selectAll(".image").html(null);
而不是.html("") （我不确定你想删除哪个元素的子元素）。 这保持元素本身，但清除所有包含的内容 。 这是做这个的官方方式 ，所以应该跨浏览器工作。
PS：你想改变圆的大小。 你有没有尝试过
d3.selectAll(".circle").attr("r", newValue);
