更新D3圆包装布局 [英] Updating D3 circle pack layout
问题描述
我尝试使用json中接收的数据动态更新d3圆圈包布局。每秒我调用d3.json（）来获取新的json。而不是更新现有的可视化，我的实现只是创建一个新的下一个。我想动态更新现有布局...
<！DOCTYPE html>
< html>
< head>
< script type =text / javascriptsrc =d3.v2.js>
< / script>
< script type =text / javascriptsrc =jquery-1.4.min.js>< / script>
< link rel =stylesheethref =style.csstype =text / css>
< link rel =stylesheethref =syntax.csstype =text / css>
< link rel =stylesheethref =pack.csstype =text / css>
< / head>
< body>
< div id =chart> < / div>
< script type =text / javascript>
var width = 960，
height = 960，
format = d3.format（，d）;
var pack = d3.layout.pack（）
.size（[width - 4，height -4]）
.value（function（d）{return d。 size;}）;
var vis = null;
var node = null;
vis = d3.select（＃chart）。append（svg）
.attr（width，width）
.attr（height height）
.attr（class，pack）;
/ * vis.append（g）
.attr（transform，translate（2,2））; * /
函数更新（json）{
//创建圆包核心
var gNodes = vis.data（[json]） .selectAll（g.node）
.data（pack.nodes）;
//删除旧数据
gNodes.exit（）。remove（）;
}
setInterval（function（）{
d3.json（http://10.0.1.4:8080/ cluster，function（json）{
update（json）;
//更新可视化
vis
.selectAll（circle）
.data（[json]）。selectAll（g.node）
.data（pack.nodes）
.attr（class，function（d）{return d.children？ ：leaf node;}）
.attr（transform，function（d）{returntranslate（+ dx +，+ dy +）;}）
。 transition（）
.duration（500）
.attr（r，function（d）{return d.children？coreSize：dr;}）;
var node = gNodes
.enter（）。append（g）
.attr（class，function（d）{return d.children？node：leaf node;}）
.attr（transform，function（d）{returntranslate（+ dx +，+ dy +）;}）;
node.append（title）
.text（function（d）{return（d == null？ ：d.name +（d.children？：：+ format（d.size）））; }）;
node.append（circle）
.attr（r，function（d）{return（d == null？0：d.r）;}）;
node.filter（function（d）{return（d == null？：！d.children）;}）append（text）
.attr文本锚点，中间）
.attr（dy，.3em）
.text（function（d）{return（d == null？：d.name .substring（0，dr / 3））;}）;
}）;
}，1000）;
< / script>
查看我的示例此处。
基本上，有初始加载的代码，其中所有的圆，工具提示等被创建和定位在初始位置。
然后，在每个按钮按下时，新数据被加载到包中，并重新计算包。这个关键代码在这里：
if（dataSource == 0）
pack.value（function（d）{ return d.size;}）;
if（dataSource == 1）
pack.value（function（d）{return 100;}）;
if（dataSource == 2）
pack.value（function（d）{return 1 +
Math.floor（Math.random（）* 501）;}）;
var data1 = pack.nodes（data）;
（我有三个按钮，这就是为什么3个ifs）
$ b
这里有一些图片的过渡动作：
p>开始：
转换：
结束：
I'm trying to dynamically update a d3 circle pack layout with data I receive in json. Every second I call d3.json() to get the new json. Instead of updating the existing visualization, my implementation just creates a new one under the old one. I want to to dynamically update the existing layout instead...
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="d3.v2.js">
</script>
<script type="text/javascript" src="jquery-1.4.min.js"></script>
<link rel="stylesheet" href="style.css" type="text/css">
<link rel="stylesheet" href="syntax.css" type="text/css">
<link rel="stylesheet" href="pack.css" type="text/css">
</head>
<body>
<div id="chart"> </div>
<script type="text/javascript">
var width = 960,
height = 960,
format = d3.format(",d");
var pack = d3.layout.pack()
.size([width - 4, height -4])
.value(function(d) { return d.size; });
var vis = null;
var node = null;
vis = d3.select("#chart").append("svg")
.attr("width", width)
.attr("height", height)
.attr("class", "pack");
/* vis.append("g")
.attr("transform", "translate(2, 2)"); */
function update(json){
// Creating the circle packed core
var gNodes = vis.data([json]).selectAll("g.node")
.data(pack.nodes);
//remove old data
gNodes.exit().remove();
}
setInterval(function(){
d3.json("http://10.0.1.4:8080/cluster", function(json) {
update(json);
//update the visualization
vis
.selectAll("circle")
.data([json]).selectAll("g.node")
.data(pack.nodes)
.attr("class", function(d) { return d.children ? "node" : "leaf node"; })
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
.transition()
.duration(500)
.attr("r", function(d) { return d.children ? coreSize : d.r; });
var node = gNodes
.enter().append("g")
.attr("class", function(d) { return d.children ? "node" : "leaf node"; })
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
node.append("title")
.text(function(d) { return (d==null? "": d.name + (d.children ? "" : ": " + format(d.size))); });
node.append("circle")
.attr("r", function(d) { return (d==null? 0: d.r); });
node.filter(function(d) { return (d==null? "" : !d.children); }).append("text")
.attr("text-anchor", "middle")
.attr("dy", ".3em")
.text(function(d) { return (d==null?"":d.name.substring(0, d.r / 3)); });
});
}, 1000);
</script>
Take a look at my example here.
Basically, there is code for initial load, where all circles, tooltips, etc. are created and positioned in initial places. As well, the layout (pack) is created.
Than, on each button press, new data is loaded into pack, and the pack is recalculated. That crucial code is here:
if (dataSource == 0)
pack.value(function(d) { return d.size; });
if (dataSource == 1)
pack.value(function(d) { return 100; });
if (dataSource == 2)
pack.value(function(d) { return 1 +
Math.floor(Math.random()*501); });
var data1 = pack.nodes(data);
( I have three buttons, thats why 3 ifs)
After that, elements are tranistioned to new positions, and its attributes are changed as you determine.
Here are some pics with transition in action:
Start:
Transition:
End:
这篇关于更新D3圆包装布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
