95

所以我有下一个用于设置节点、链接和其他元素的强制布局图代码：

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'仍然存在。

无论如何，任何帮助将不胜感激，如果解释不够清楚，请告诉我，我会尝试修复它。

PSgraphData.nodes 和 和有什么不一样d3.selectAll('.nodes')？

4

5 回答 5

146

你的答案会奏效，但对于后代来说，这些方法更通用。

从 HTML 中删除所有子项：

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

从 SVG/HTML 中删除所有子项：

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

该.html("")调用适用于我的 SVG，但它可能是使用innerSVG的副作用。

于 2014-03-20T03:43:51.933 回答
9

我的第一个建议是您应该阅读d3.js有关选择的 API：https ://github.com/mbostock/d3/wiki/Selections

您必须了解该enter()命令的工作原理（API）。您必须使用它来处理新节点这一事实对您有帮助。

这是您处理时的基本过程selection.data()：

  • 首先，您想将一些数据“附加”到选择中。所以你有了：

      var nodes = visualRoot.selectAll(".node")
      .data(graphData.nodes)

  • 然后，您可以在每次更改数据时修改所有节点（这将完全符合您的要求）。例如，如果您更改加载的新数据集中旧节点的半径

      nodes.attr("r", function(d){return d.radius})

  • 然后，您必须处理新节点，为此您必须选择新节点，这是selection.enter()为：

      var nodesEnter = nodes.enter()
      .attr("fill", "red")
      .attr("r", function(d){return d.radius})

  • 最后，您当然想删除不再需要的节点，为此，您必须选择它们，这就是selection.exit()目的。

      var nodesRemove = nodes.exit().remove()

整个过程的一个很好的例子也可以在 API wiki 上找到：https ://github.com/mbostock/d3/wiki/Selections#wiki-exit

于 2013-01-20T15:18:07.457 回答
7

这样，我已经很轻松地解决了，

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

然后我只是重新添加了渲染不同的视觉元素，因为计算半径和颜色的代码已经改变了属性。谢谢你。

于 2013-01-21T04:48:37.077 回答
7

如果您想删除元素本身，只需使用element.remove()，就像您一样。如果您只想删除元素的内容，但保持元素原样，您可以使用 f.ex。

visualRoot.selectAll(".circle").html(null);
visualRoot.selectAll(".image").html(null);

而不是.html("")（我不确定要删除哪个元素的子元素）。这会保留元素本身，但会清除所有包含的内容。这是执行此操作的官方方式，因此应该跨浏览器工作。

PS：你想改变圆圈大小。你有没有尝试过

d3.selectAll(".circle").attr("r", newValue);
于 2017-04-27T15:22:18.757 回答
3

要从节点中删除所有元素：

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]);
    }
}`
于 2013-01-22T05:02:47.680 回答