更新D3圆形包装布局

我正在尝试动态更新我在json中接收的数据的圆形包装布局。我每秒钟都会调用d3.json（）来获取新的json。我的实现不是更新现有的可视化，而是在旧的实现下创建一个新实例。我要动态地更新现有的布局，而不是...更新D3圆形包装布局

<!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>

来源

2012-08-03 capkutay

看看我的例子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);

（我有三个按钮，这就是为什么3个IFS）

之后，元素tranistioned到新的位置，它的属性被更改为您确定。

这里有一些照片与动作转换：

开始：

start

转型：

transition

结束：

end

来源

2013-12-29 12:03:52 VividD

更新D3圆形包装布局

回答

相关问题