2

私は過去数日間この問題に苦労してきました。この例のようにエッジにラベルを付ける力指向グラフがあります。私が直面している問題は、グラフが更新されると（つまり、ユーザーのクリックでグラフ上のノードが追加されると）グラフが更新されますが、以前に書いた古いエッジラベルが残ります。

新しいグラフが追加される前と後： 前 後

ご覧のとおり、更新後、エッジラベルがぶら下がっています。新しいデータが着信するたびに呼び出される関数があり、この関数には、ラベルを描画する次のコードがあります。

path_text = svg.selectAll(".path")
.data(force.links(), function(d){ return d.name;})
.enter().append("svg:g");
path_text.append("svg:text")
.attr("class","path-text")
.text(function(d) { return d.data.label; });

svg変数は、次のようにトップレベルのクロージャで1回宣言されます。

var svg = d3.select("body").append("svg:svg")
        .attr("viewBox", "0 0 " + width + " " + height)
        .attr("preserveAspectRatio", "xMidYMid meet");

私のグラフには、次のように各ラベルの位置を計算するtick（）関数があります。

function tick()
    {
            // Line label           
            path_text.attr("transform", function(d) 
            {
                var dx = (d.target.x - d.source.x),
                dy = (d.target.y - d.source.y);
                var dr = Math.sqrt(dx * dx + dy * dy);
                var sinus = dy/dr;
                var cosinus = dx/dr;
                var l = d.data.label.length * 6;
                var offset = (1 - (l / dr )) / 2;
                var x=(d.source.x + dx*offset);
                var y=(d.source.y + dy*offset);
                return "translate(" + x + "," + y + ") matrix("+cosinus+", "+sinus+", 

"+-sinus+", "+cosinus+", 0 , 0)";
                });
.
.
.

このsvg宣言をupdate関数に移動して、グラフが変更されるたびにインスタンス化されるようにしました。これは実際には機能しますが、グラフ全体の複製全体を作成します。最初の元のコピーはまだ古いラベルを保持していますが、2番目のコピーは私が望むとおりに機能します。おそらく、svgを追加する代わりに、置き換える方法はありますか？また、exit（）。remove（）を呼び出してみましたが、運がありませんでした。

どうもありがとうございました。これは私がこれをどのように行うべきかについて私を殺してきました。

4

1 に答える 1

1

グラフ更新関数内にsvg宣言を配置し、それをdivにアタッチし、divをクリアしてから再度追加しました。

jQuery('#v').empty();
var svg = d3.select("#v").append("svg:svg")
.attr("viewBox", "0 0 " + width + " " + height)
.attr("preserveAspectRatio", "xMidYMid meet");

私の意見では最もクリーンな解決策ではありませんが、皆さんがより良い解決策を持っていない限り、これでうまくいきます！

于 2012-08-18T23:21:19.570 に答える