我试图在d3.js中创建实时气泡图图表本身很简单,因为所显示的数据是非嵌套数组。它只是不同大小的泡泡。实时D3气泡图(圆形包)
与来自通过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);
}
});
};
});
我会很高兴,如果有人有一个很好的链接,例如或暗示对如何执行更新。我想这一定是像
- 获取新数据
- 计算新模式
- 添加/删除是新/不再在新获取的数据
- 开始转换节点的所有现有节点
感谢您的任何提示!
作为一个建议,'attr()'方法可以接受一个键/值对的对象,而不是为每个属性调用它。另外,为什么你有'async:false'? –
异步:不需要,你是对的。你的意思是将链式attr()融合成一个? – peter
是的,IMO它只是更干净。 '$()。attr({key:value,foo:bar})' –