1

これは説明するのが難しいですが、答えが簡単であることを願っています...我慢してください... jsをいじることを考えましたが、使用するデータは内部サーバーからのものであるため、多くのコードを書き直す必要があります。

私はネットワーク マップをモデル化するために大量の js を作成しましたが、これは長すぎます。問題の本質は、初期データを使用してマップをうまく描画できることですが、マップを更新すると、つまり、ノードを削除するときに破損することがあります。元のマップ (ただし、新しいノードを追加することはできます)

問題は、svg オブジェクトの描画方法にあると思います。

私はその場でd3を少し動かそうとしているので、意図せずに正しいことから逸脱した可能性があります。

まず、vis を定義します (現在は window.vis なので、コンソールでテストできます)。いくつかの例では、変数 svg を使用していると思います。

  window.vis = d3.select("body")
    .append("svg:svg")
    .attr("pointer-events", "all")
    .append('svg:g')
    .call(d3.behavior.zoom().on("zoom", redraw))
    .append('svg:g');

次に、nodeArray (必要なノードの配列) と linkArray (必要なリンクの配列) を作成し、ノードとリンクを描画します。

link = vis.selectAll("line").data(linkArray);
        link.enter().append("line")
        .attr("stroke-opacity", function (d, i) {
            if (d.class == 'link reallink') {
                return '0.8';
            } else {
                return '0';
            };
        })
        .attr("stroke-width", function (d, i) {
            if (d.class == 'link reallink') {
                return '3';
            } else {
                return '0';
            };
        })
        .style("stroke", function (d, i) { return d.color; });



        node = vis.selectAll("g.node").data(nodeArray);
        node.enter().append("svg:g")
        .attr("class", function (d) { return d.class })
        .attr("id", function (d) { return d.id })
        .call(force.drag);


        //append to each node an svg circle element
        vis.selectAll(".realnode").append("svg:circle")
        .attr("r", function (d, i) { 
            if (d.status != "0") { 
                return r*2; 
            } else { 
                if (d.iconimage == "") { return r; } else { return 1; } 
            }
        })
        .style("fill", function (d, i) { if (d.status != "0") { if (d.status == "1") { return "#ff0000"; } else { return "#FFBF00"; } } else { return "#FFFFFF"; }})
        .style("stroke", function (d) {
            if (d.style !== 'filled') { return d.color; };
        })
        .style("stroke-width", "4");


        //attach images to the nodes
        vis.selectAll(".realnode").append("image")
        .attr("xlink:href", function (d) { return d.iconimage; })
        .attr("x", -16)
        .attr("y", -16)
        .attr("width", 32)
        .attr("height", 32);

注: 私が使用するノード クラスは node (すべてのノード) と realnode (実際のオブジェクト) です (後で別のクラス labelnode としてテキスト ラベルもモデル化するため)。nodeArray はノードとしてフォーマットされたオブジェクトの単なる配列であり、linkArray は単なるリンクの配列です。

「リンク」と「ノード」を定義していることがわかります-すべての例とほぼ同じです-しかし、node.selectAll(".realnode").append を使用すると、円と画像が適切に追加されないことがわかりました...しかしvis.selectAll(".realnode").append... を使用すると正常に動作するので、それを実行して先に進みました

しかし、私はこの理解不足を解決する必要があると思います!

後で nodeArray からノードを削除し、linkArray からリンクを削除して表示を更新すると、再び「ノード」オブジェクトと「リンク」オブジェクトを「vis」と無計画に組み合わせて使用​​します。その時点ですべてがうまくいかず、破損します。ページの svg 要素にはまだ適切なオブジェクトが定義されていますが、画像が入れ替わり、テキストが入れ替わり、リンクがノードなしで自然に浮かんでいます! nodeArray と linkArray を確認しましたが、それらは完全に正しいものでした。更新後に「新しい」データを元のデータとして使用すると、ページを最初にロードしたときに正常にレンダリングされるため、データ オブジェクトにかなり自信があります。

誰かがこれを見て、私が間違っていることを理解してくれることを願っているので、質問に答えて、これを更新するのが最善の方法だと思います。本当に厄介なことは、最初のページの読み込みは常に完全に機能しますが、最初のページ全体のコードをゼロから描画するよりもデータの更新に時間がかかることです!

ありがとう

――クリス

4

1 に答える 1

0

コードと説明を正しく理解していれば、 nodeArray には class を持つアイテムと classnodeを持つアイテムがありrealnodeます。ノードを作成すると、 class のノードのみが選択されますnode。これにより、各クラスのグループを作成できますが、選択範囲は class のグループにのみ限定されnodeます。両方のクラスでノードを作成する必要があると思います

nodes = vis.selectAll('g')
   .data(nodeArray)
   ...
   .call(force.drag);

そして、要素のクラスに基づいて選択を操作します。

nodes.selectAll('g.realnode')
   // ... set attributes here

また、リンクおよびノー​​ド クラスの属性を設定するために css を使用することをお勧めします。

links = vis.selectAll('line')
    .classed('real-link', function(d) { return d.class == 'link reallink'; });

そしてcssで：

svg .real-link {
    stroke-opacity: 0.8;
    stroke-width: 3;
}
于 2013-05-12T20:12:05.000 に答える