10

我正试图围绕 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", function(d) { return "translate(" + d.x + "," + d.y + ")" });

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

    };

具体问题...

如何绑定数据？（因为数据不是复杂的结构，也不是数据数组）

如何将新节点/叶子添加到布局中？旧的被删除了？

指向一个工作示例的指针将不胜感激。

4

3 回答 3

10

工作示例在这里。

基本上，有用于初始加载的代码，其中所有圆圈、工具提示等都被创建并定位在初始位置。同样，布局（包）被创建。

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

在这里，您现在将数据绑定（加载）到包布局中：（在我的示例中，它的随机数据，当然您将获得来自 json 或代码或类似的数据）：

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

这里计算了新的布局：

pack.nodes(data);

之后，元素被转换到新的位置，并且它的属性会随着你的决定而改变。

我只是想强调一下，我不使用进入/更新/退出模式或转换（您可能会在其他解决方案中看到），因为我相信这会为此类示例引入不必要的复杂性。

以下是一些带有过渡效果的图片：

开始：

开始

过渡：

过渡

结尾：

结尾

于 2013-12-29T12:21:08.023 回答
4

我最近遇到了同样的问题，并且也遇到了通用更新模式教程。这些没有达到我的目的。我在一个图表（ForceLayout）中有几百个 DOM 元素，我正在接收带有每个单独节点属性的 REST 数据。正如您在回应 mg1075 的建议时所说，通过重新绑定数据进行刷新会导致整个图的重建。在我的例子中，完成更新 DOM 需要几分钟。

我最终为以后需要更新的元素分配了唯一的 ID，然后我用 JQuery 挑选了它们。我的整个图表设置使用 D3，但我的更新没有。这感觉很糟糕，但它工作得很好。与其花费几分钟来销毁和重新创建我的大部分 DOM，不如花费大约 3 秒（排除 REST 调用的时间）。我看不出在 D3 中无法进行属性更新之类的事情的原因。

也许如果 Mike Bostock 在 enter() 选择中添加了 remove() 或适当的子选择函数，我们可以遵循纯 D3 模式进行更新。在弄清楚这一点时，我试图绑定数据子集，添加了新属性的数据，然后进行子选择以获取需要更新的元素，但由于输入的有限和特定性质，它不起作用() 选择。

于 2013-09-05T17:07:45.660 回答
3

相关的，如果您尚未查看：
http ://bl.ocks.org/3808218 - 一般更新模式，I
http://bl.ocks.org/3808221 - 一般更新模式，II
http://bl。 ocks.org/3808234 - 一般更新模式，III

这个示例小提琴没有转换，但这里至少有一种更新数据的方法。

http://jsfiddle.net/jmKH6/

//  VISUALIZATION
var svg = d3.select("#kk")
    .append("svg")
    .attr("width", 500)
    .attr("height", 600)
    .attr("class", "pack"); 

var g = svg.append("g")
    .attr("transform", "translate(2,2)");

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

function update(data) {

    var nodeStringLenth = d3.selectAll("g.node").toString().length; 
    if ( nodeStringLenth > 0) {
        d3.selectAll("g.node")
            .remove();
    }

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

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

       node
            .exit()
            .remove();
}


var myData = [data1, data2, data3];
update(data1); 
setInterval(function() {
    update( myData[Math.floor(Math.random() * myData.length)] );  // http://stackoverflow.com/questions/4550505/getting-random-value-from-an-array?lq=1
}, 1500);
于 2013-02-10T08:34:18.733 回答