私は少しの間 d3.js ライブラリを使用しており、ビジュアライゼーションが気に入っていますが、必要なものを正確に達成するのに苦労しています。
私がやろうとしていること:
他のノードとはスタイルが異なる中央ノードを使用してグラフを作成しました。ビジュアライゼーションには中央にラベル (id=node0 の特別なノード) があり、そのラベルに接続されているのは他のスタイルのノードです。
ユーザーが送信を押すと、ajax 呼び出しが JavaScript 情報を更新し、新しいノードでシミュレーションを再開します。
ここに表示されているのと同じ方法で設定しました。
私の更新機能は次のようになります。
function restart()
{
for ( ii = 0; ii < nodes.length; ii++ ) {
var n = nodes[ii];
if (n.id == 0)
{
n.fixed = true;
n.x = w/2;
n.y = h/2;
continue;
}
mult1 = [ -1.0, -1.0, 1.0, 1.0 ];
mult2 = [ 1.0, -1.0, -1.0, 1.0 ];
n.x = w/2 + ii*5 * mult1[ii%4];
n.y = h/2 + ii*5 * mult2[ii%4];
}
var node = svg.selectAll("g.node")
.data(nodes, function(d) { return d.id;});
var nodeEnter = node.enter().append("g")
.attr("id", function(d) { return "node" + d.id })
.attr("class", "node")
.call(force.drag);
node.exit().remove();
node.each( function(d) {
if (d.id != 0)
{
n = svg.select("#node" + d.id);
frame = n.append("svg:foreignObject")
.attr("x", -1.0 * platewidth/2)
.attr("y", -1.0 * plateheight/2)
.attr("width", platewidth)
.attr("height", plateheight)
.on("click", showdetail)
.on("tap", showdetail);
frame.append("xhtml:div")
.attr("class", "top-plate")
.html(function(d) { return "<img src='/img/" + d.img + "'>" } );
frame.append("xhtml:div")
.attr("class", "btm-plate")
.html( function (d) { return d.name });
n.append("image")
.attr("xlink:href", function(d) { return d.ownerimg })
.attr("x", platewidth/2 - 35)
.attr("y", plateheight/2 - 15)
.attr("width", 30)
.attr("height", 30)
.on("click", showdetail)
.on("tap", showdetail);
n.append("image")
.attr("xlink:href", function(d) { return d.houseimg })
.attr("x", platewidth/2 - 70)
.attr("y", plateheight/2 - 15)
.attr("width", 30)
.attr("height", 30)
.on("click", showdetail)
.on("tap", showdetail);
}
else
{
querytext = d.query;
n = svg.select("#node" + d.id);
n.append("text")
.attr("text-anchor", "middle")
.text(querytext);
n.attr("transform", function(d) {
return "translate(" + d.x + "," + d.y + ")";
});
}
});
force.start();
}
私が抱えている問題：
ノードの 2 番目の DIV 要素 (d.name を含む HTML 要素を持つもの) は、Chrome で再配置されません。Firefox では問題なく動作しますが、Chrome ではこれらの DIV がすべて 0,0 に表示されます。これらのノードの最初の DIV (img タグを含む) と、ノードに添付されたすべての画像がすべて正常に表示され、適切に再配置されることに注意してください。関連付けられたノードで再配置されていないのは、この 2 番目の DIV だけです。
node0 のラベル テキストを正しく更新/変更することができません。(d.query を使用して) 新しいテキストを渡すと、そのテキストが古いテキストを上書きして、両方が表示されるようにします。最初にnode0に関連付けられた「テキスト」要素を削除する必要があると思いますが、その方法がわかりません。
一般に、このライブラリを正しい方法で使用しているかどうかはよくわかりません。ここでの難しさは、ノードに多くのアタッチを行っていることと、他のノードとは異なる動作をする特別な中央ノードが 1 つあることに起因しています。そのため、これをより適切に行う方法についての指針をいただければ幸いです。
ありがとう