遍历D3js中已创建的节点 [英] Iterate over already created nodes in D3js

问题描述

我正在使用力导向图，并将新创建的节点添加到图中.效果很好.

I am using a force-directed graph and am adding newly created nodes to the graph. This works perfectly fine.

我的节点具有一个不断变化的称为状态"的属性.我面临的问题是，在我的代码中，仅当有新节点进入时才检查检查状态"的条件.当有更新时，我的JSON将使用状态进行更新，但执行未达到用于检查状态的代码.

My node has a property called "state" that keeps changing. The problem I'm facing is that, in my code, the condition to check the "state" is only checked when a new node comes in. When theres an update, my JSON is updated with the state but the execution doesn't reach the code for checking the state.

在下面找到我的代码:

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();
            }

我现在了解到这一点，它仅在新节点上进行迭代.有人可以告诉我如何遍历现有节点吗?

I understand that right now, its iterating over new nodes only. Can someone please tell me how to iterate over the existing nodes too?

谢谢.

推荐答案

您只需在状态更新发生的代码部分中选择节点并对其进行操作即可.

You can simply select your nodes and manipulate them in the part of your code where the state update happens.

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

If the update happens very frequently, it might be worth storing the selection in a variable and saving the time it takes to search through the DOM.

这篇关于遍历D3js中已创建的节点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！