迭代D3js中已经创建的节点

Question

我正在使用强制导向图并将新创建的节点添加到图形中.这完全没问题.

我的节点有一个名为"状态"的属性,不断变化.我面临的问题是,在我的代码中,检查"状态"的条件仅在新节点进入时进行检查.当有更新时,我的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();
            }

我现在明白,它只迭代新节点.有人可以告诉我如何迭代现有节点吗？

提前致谢.

Answer 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所需的时间.