我正在尝试在 d3.js 中创建一个实时气泡图 图表本身很简单,因为显示的数据是一个非嵌套数组。这只是不同大小的气泡。
带有通过 ajax 从 MVC Controller 获取的初始数据的初始气泡图是这样创建的:
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 Controller 获取新数据,然后执行转换。转换完成后,该方法再次调用自身:
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);
}
});
};
});
如果有人有关于如何执行更新的良好链接、示例或提示,我会很高兴。我猜它一定是这样的
- 获取新数据
- 计算新模型
- 在新获取的数据中添加/删除新的/不再存在的节点
- 开始所有现有节点的转换
感谢任何提示!
最佳答案
IE 决定自动缓存标准的“d3.json()”请求。所以我切换为带有“缓存:false”的显式 jQuery ajax 请求。以其基本形式,更新现在可以运行,尽管代码可能仍然显示出我对 d3 的一些传统。
我想我会用它来可视化在我们的 Intranet 电视网站上观看电视 channel 的用户数量,但我想我会切换到折线图。不过,这是代码:
function dynamicBubbles() {
// call redraw every 5 sec
setInterval(function() {
redraw();
}, 5000);
var width = 960;
var height = 500;
// construct SVG container
var chart = d3.select("#dynD3").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(50, 50)");
// define our pack
var pack = d3.layout.pack()
.size([width, height - 50])
.padding(10);
function redraw() {
// get data from MVC controller
return $.ajax({
type: "GET",
async: true,
cache: false,
url: "/Nice/d3_getCoolBubble",
data: { },
success: function (data) {
// asign new data to existing layout
var node = chart.selectAll(".node")
.data(pack.nodes(data), function (d) { return d.name });
// access brand new data
node.enter().append("g")
.classed("node", true)
.attr("transform", function (d) { return "translate(" + d.x + "," + d.y + ")"; })
.append("circle")
.attr("fill", function (d) { return d.children ? "#fff" : "steelblue" })
.attr("stroke", function (d) { return d.children ? "#fff" : "#ADADAD" })
.attr("stroke-width", "1")
.transition()
.attr("r", function (d) { return d.r });
node.transition()
.duration(2000)
.attr("transform", function (d) { return "translate(" + d.x + "," + d.y + ")"; });
node.select("circle")
.transition()
.duration(2000)
.attr("r", function (d) { return d.r; })
node.append("text")
.text(function (d) { return d.name; });
}
});
关于javascript - 实时 D3 气泡图(圆包),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19716172/