在d3.js中更新layout.pack [英] Updating a layout.pack in d3.js

问题描述

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

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

我的基本布局有效，但我想用新数据更新它。即收集新数据，将其绑定到当前layout.pack并相应更新（更新/退出/输入）。

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).

我的尝试在这里（ 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.

推荐答案

工作示例是这里。

基本上，有初始加载的代码，所有圆圈，工具提示等都在初始位置创建和定位。同样，也会创建布局（包）。

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:

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

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); });

此处计算新布局：

pack.nodes(data);

之后，元素将转换为新位置，其属性会在您确定时更改。

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

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

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:

开始：

转型：

结束：

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