迭代 D3js 中已创建的节点答案

【问题标题】：Iterate over already created nodes in D3js迭代 D3js 中已创建的节点
【发布时间】：2014-12-10 15:56:50
【问题描述】：

我正在使用力导向图并将新创建的节点添加到图中。这工作得很好。

我的节点有一个名为“状态”的属性，它会不断变化。我面临的问题是，在我的代码中，检查“状态”的条件仅在新节点进入时检查。当有更新时，我的 JSON 会更新状态但执行未达到检查状态的代码。

在下面找到我的代码：

function buildGraph() {
                // Update link data
                link = link.data(links);

                // Create new links
                link.enter().append("g")
                .attr("class", "link")
                .each(function (d) {
                    d3.select(this)
                    .append("line")
                    .attr("stroke", "#000")
                    .attr("stroke-width", 2)
                    .attr("opacity", 0.3);
                });

                // Delete removed links
                link.exit().remove();

                // Update node data
                node = node.data(nodes);

                // Create new nodes
                node.enter().append("g")
                .attr("class", "node")
                .each(function (d) {
                    if (d.state == "0") {                      // doesn't come here after an update
                        var imgId = d.name;
                        d3.select(this).append("svg:image")
                        .attr("class", "spinner")
                        .attr("id", imgId)
                        .attr("xlink:href", "Images/icons/ajax-loader.gif")
                        .attr("x", "+16px")
                        .attr("y", "-16px")
                        .attr("width", "20px")
                        .attr("height", "20px");
                    } else if (d.state == "1") {
                        var imgId = "#" + d.name;
                        d3.select(imgId).remove();
                    } else if (d.state == "3" || d.state == "4") {
                        //d3.select(this)
                        //    .style("opacity", 0.4);

                        d3.select(this)
                        .style("filter", function (d, i) {
                            if (i % 2 == 0) {
                                return ("filter", "url(#desaturate)");
                            } else {
                                return "";
                            }
                        });
                    }

                    d3.select(this).append("text")
                    .attr("dy", ".50em")
                    .attr("text-anchor", "end")
                    .attr("font-size", "15px")
                    .attr("fill", "black")
                    .text(function (d) { return d.name; });

                    d3.select(this).call(force.drag);
                })
                //.call(force.drag)
                .on('mouseover', tip.show)
                .on('mouseout', tip.hide);

                // Delete removed nodes
                node.exit().remove();

                //debugger;
                force.start();
            }

我现在明白，它只迭代新节点。有人能告诉我如何迭代现有节点吗？

提前致谢。

【问题讨论】：

标签： d3.js force-layout

【解决方案1】：

您可以简单地选择节点并在发生状态更新的代码部分中对其进行操作。

function updateState() {
  ... // processing the update
  d3.selectAll('g.node')  //here's how you get all the nodes
    .each(function(d) {
      // your update code here as it was in your example
      d3.select(this) // Transform to d3 Object
      ... 
    });
}

如果更新非常频繁，可能值得将选择存储在一个变量中并节省搜索 DOM 所花费的时间。

【讨论】：