Question

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

我的节点有一个名为“state”的属性，它不断变化。我面临的问题是，在我的代码中，检查“状态”的条件仅在新节点进入时进行检查。当有更新时，我的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所需的时间。

迭代D3js中已经创建的节点

1 个答案: