更新D3圆包布局

Question

I'm trying to dynamically update a d3 circle pack layout with data I receive in json. 我正在尝试使用json中收到的数据动态更新d3 circle pack布局。 Every second I call d3.json() to get the new json. 每一秒我都会调用d3.json（）来获取新的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>

Answer 1

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) （我有三个按钮，这就是为什么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圆包布局

问题描述

1 个解决方案

解决方案1
3 已采纳 2013-12-29 12:03:52

更新D3圆包布局

问题描述

1 个解决方案

解决方案1 3 已采纳 2013-12-29 12:03:52

解决方案1
3 已采纳 2013-12-29 12:03:52