更新d3.js中的layout.pack [英] update a layout.pack in d3.js

问题描述

我试图围绕d3的包装布局（ http://bl.ocks.org/4063530 ）。

我的基本布局工作，但我想更新它的新数据。即收集新数据，将其绑定到当前layout.pack并相应地更新（update / exit / enter）。

我的尝试在这里（ http://jsfiddle.net/emepyc/n4xk8/14/ ）：

  var bPack = function（vis）{
 var pack = d3.layout.pack（）
 .size（[400,400]）
 .value（function（d）{return d.time}）; 
 
 var node = vis.data（[data]）
 .selectAll（g.node）
 .data（pack.nodes）
 .enter ）
 .append（g）
 .attr（class，function（d）{return d.children？node：leaf node;}）
 .attr （transform，function（d）{returntranslate（+ dx +，+ dy +）; 
 
 node.append（circle）
 .attr（r，function（d）{return d.r}）; 
 
 node.filter（function（d）{return！d.children;}）append（text）
 .attr（text-anchor，middle）
 .attr（dy，.3em）
 .text（function（d）{return d.analysis_id}）; 
 
 bPack.update = function（new_data）{
 console.log（UPDATE）; 
 
 node 
 .data（[new_data]）
 .selectAll（g.node）
 .data（pack.nodes） 
 
 node 
 .transition（）
 .duration（1000）
 .attr（class，function（d）{return d.children？node ：leaf node}）
 .attr（transform，function（d）{returntranslate（+ dx +，+ dy +）} 
 
 node.selectAll（circle）
 .data（new_data）
 .transition（）
 .duration（1000）
 .attr r，function（d）{return dr;}）; 
 
}; 
  

具体问题...
如何绑定数据？ （因为数据不是复杂的结构而不是数据数组）。
如何将新节点/叶添加到布局？和老的删除？

干杯，

M;

p>

解决方案

工作范例是这里。

基本上，有初始加载的代码，其中所有的圆，工具提示等等都在初始位置创建和定位。

然后，在每个按钮按下时，新数据被加载到包中，并重新计算包。这个关键代码在这里：

在这里你绑定（加载）现在的数据到包布局：（在我的例子中，它的随机数据， json或代码或类似的）：

  pack.value（function（d）{return 1 + 
 Math.floor （Math.random（）* 501）;}）; 
  

新布局计算如下：

  pack.nodes（data）; 
  

之后，元素将转换到新位置，其属性会根据您的确定而更改。 p>

我只想强调，我不使用enter / update / exit模式或转换（你可能在其他解决方案中看到），因为我相信这会引入不必要的复杂性这样的例子。

以下是一些操作过渡的图片：

开始：

转换：

结束：

I am trying to wrap my mind around d3's pack layout (http://bl.ocks.org/4063530).

I have the basic layout working but I would like to update it with new data. i.e. collect new data, bind it to the current layout.pack and update accordingly (update/exit/enter).

My attempts are here (http://jsfiddle.net/emepyc/n4xk8/14/):

var bPack = function(vis) {
    var pack = d3.layout.pack()
    .size([400,400])
    .value(function(d) {return d.time});

    var node = vis.data([data])
    .selectAll("g.node")
    .data(pack.nodes)
    .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("circle")
    .attr("r", function(d) { return d.r });

    node.filter(function(d) { return !d.children; }).append("text")
    .attr("text-anchor", "middle")
    .attr("dy", ".3em")
    .text(function(d) { return d.analysis_id });

    bPack.update = function(new_data) {
        console.log("UPDATE");

        node
        .data([new_data])
        .selectAll("g.node")
        .data(pack.nodes);

        node
        .transition()
        .duration(1000)
        .attr("class", function(d) { return d.children ? "node" : "leaf node" })
    .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")" });

        node.selectAll("circle")
        .data(new_data)
        .transition()
    .duration(1000)
    .attr("r", function(d) { return d.r; });

    };

Specific questions... How do I bind the data? (since the data is not complex structure and not an array of data). How can new nodes/leafs be added to the layout? and old ones removed? Pointers to a working example would be greatly appreciated.

Cheers,

M;

解决方案

Working example is 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:

Here you bind (load) now data into pack layout: (in my example its random data, of course you'll have your data from json or code or similar):

pack.value(function(d) { return 1 +
             Math.floor(Math.random()*501); });

Here the new layout is calculated:

pack.nodes(data);

After that, elements are transitioned to new positions, and its attributes are changed as you determine.

I just want to stress that I don't use enter/update/exit pattern or transformations (that you might see in others solutions), since I believe this introduces unnecessary complexity for examples like this.

Here are some pics with transition in action:

Start:

Transition:

End:

这篇关于更新d3.js中的layout.pack的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！