javascript – 在d3.js中更新layout.pack

我试图围绕d3的包装布局( http://bl.ocks.org/4063530).

我有基本的布局工作,但我想更新它与新的数据.即收集新数据,将其绑定到当前layout.pack并相应更新(更新/退出/输入).

我的尝试在这里(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"," + d.y + ")" });

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

    };

具体问题…
如何绑定数据？ (因为数据不是复杂的结构而不是数组).
新节点/叶片如何添加到布局中？旧的被删除了？
一个工作示例的指针将不胜感激.

干杯,

米;

解决方法

工作实例是 here.

基本上,有初始加载代码,其中所有的圆,工具提示等都被创建并定位在初始位置.同样,创建了布局(包).

比起每个按钮,新的数据都被加载到包装中,重新计算包装.这个关键代码在这里：

在这里你绑定(加载)现在数据到包布局：(在我的例子中,它的随机数据,当然你会有你的数据从json或代码或类似的)：

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

这里的新布局是计算的：

pack.nodes(data);

之后,元素被转换到新的位置,并且其属性根据您的确定而改变.

我只是想强调,我不使用输入/更新/退出模式或转换(您可能会在其他解决方案中看到),因为我相信这会引起不必要的复杂性,这样的示例.

这里有一些与行动过渡有关的图片：

开始：

过渡：

结束：

javascript – 在d3.js中更新layout.pack

解决方法

猜你在找的JavaScript相关文章