更新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圓形包裝佈局

回答

相關問題