web-dev-qa-db-ja.com

D3jsで既に作成されているノードを反復する

力指向グラフを使用して、新しく作成したノードをグラフに追加しています。これは完璧に機能します。

私のノードには、変化し続ける「状態」と呼ばれるプロパティがあります。私が直面している問題は、コードで「状態」をチェックする条件が新しいノードが入ったときにのみチェックされるということです。更新があると、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.jsforce-layout
13
Natasha

ノードを選択して、状態の更新が発生するコードの一部でノードを操作するだけです。

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の検索にかかる時間を節約することをお勧めします。

39
Andrew