d3.js でリアルタイムのバブル チャートを作成しようとしています。表示されるデータがネストされていない配列であるため、チャート自体は単純です。それはちょうど異なるサイズの泡です。
Ajax を介して MVC コントローラーからフェッチされた初期データを含む初期バブル チャートは、次のように作成されます。
var canvas = d3.select("#dynD3")
.append("svg")
.attr("width", 800)
.attr("height", 500)
.append("g")
.attr("transform", "translate(50, 50)");
var pack = d3.layout.pack()
.size([800, 450])
.padding(10);
d3.json("/Nice/d3_getCoolBubble", function (data) {
var nodes = pack.nodes(data);
console.log(data);
var node = canvas.selectAll(".node")
.data(nodes)
.enter()
.append("g")
.attr("class", "node")
.attr("transform", function (d) {
return "translate(" + d.x + "," + d.y + ")";
});
node.append("circle")
.attr("class", function (d) { return d.children ? "noupdate" : "update" })
.attr("id", function (d) { return d.name; })
.attr("r", function (d) { return d.r })
.attr("fill", function (d) { return d.children ? "#fff" : "steelblue" })
.attr("stroke", function (d) { return d.children ? "#fff" : "#000" })
.attr("stroke-width", "2");
node.append("text")
.text(function (d) { return d.children ? "" : d.name; });
最初のバブルの作成に追加されるのは、
tick()
関数。この関数は、MVC コントローラーから新しいデータをフェッチしてから遷移を実行する必要があります。遷移が完了すると、メソッドは再び自分自身を呼び出します。
function tick() {
$.ajax({
type: "GET",
async: false,
url: "/Nice/d3_getCoolBubble",
data: {},
success: function (result) {
console.log(result);
var update = canvas.selectAll(".update");
update.transition()
.duration(5000)
.attr("transform", function (d) {
return "translate(" + d.x + "," + d.y + ")";
})
.each("end", tick);
}
});
};
});
更新の実行方法について、誰かが良いリンク、例、またはヒントを持っていれば幸いです。私はそれが次のようなものでなければならないと思います
- 新しいデータを取得する
- 新しいモデルを計算する
- 新しくフェッチされたデータに新しい/なくなったノードを追加/削除します
- 既存のすべてのノードの遷移を開始します
ヒントをありがとう!