Question

我想在D3.js中动态更新网络图。现在我的代码是：

var color = d3.scale.category20();
var my_nodes = [{"cluster": 0, "x": 50,  "y": 50},
                {"cluster": 0, "x": 100, "y": 50},
                {"cluster": 1, "x": 100, "y":100}];
var vis = d3.select("body").append("svg").attr("width", 500).attr("height", 500);
var nodes = vis.selectAll("circle.node").data(my_nodes).enter().append("g")
               .attr("class", "node");
var circles = nodes.append("svg:circle")
                   .attr("cx", function(d) { return d.x; })
                   .attr("cy", function(d) { return d.y; })
                   .attr("r", 5)
                   .style("fill", function(d) {return color(d.cluster)});

此代码有效。但是当我更新数据时：

var new_nodes = [{"cluster": 0, "x": 50,  "y": 50},
                 {"cluster": 2, "x": 100, "y": 50},
                 {"cluster": 2, "x": 100, "y":100}];
nodes.data(new_nodes);

不起作用。

如何更新绑定数据？

编辑：我想要做的是用新数据my_nodes替换旧数据new_nodes。有没有办法更新每个绑定数据的属性cluster？

EDIT2：假设我这样做：

d3.select("body").select("svg").selectAll("circle").data(mydata).enter().append("svg:circle");

我可以修改mydata吗？

Answer 1

没有数据绑定魔法角色会触发“重绘”。只需致电.data，然后重新设置属性：

function update(){
 nodes
  .attr("cx", function(d) {
    return d.x;
  })
  .attr("cy", function(d) {
    return d.y;
  })
  .attr("r", 5)
  .style("fill", function(d) {
    return color(d.cluster)
  });
}

var nodes = vis.selectAll("circle.node").data(my_nodes)
  .enter()
  .append("g")
  .attr("class", "node")
  .append("svg:circle");
update();

// some time later

nodes.data(new_nodes);
update();

示例here。

Answer 2

不确定你希望如何看待它，但我在这里创造了一个小提琴：http://jsfiddle.net/henbox/8ua144p4/4/

单击update按钮将更新为新数据。

我根据General Update Patterns和this article from Mike on Joins

进行了更改

我在每个圈子的fill属性上进行了转换，因此您可以在这种情况下看到节点正在更新，而不是添加新节点。我还展示了第四个新节点，以演示差异。

最后，我通过移除node（g）元素并使用circle简化了一些事情。这是重要的代码：

// DATA JOIN
// Join new data with old elements, if any.
var circle = vis.selectAll("circle").data(data);

// ENTER
// Create new elements as needed.
circle.enter().append("svg:circle").attr("r", 5);

// UPDATE
// Update old elements as needed.
circle.attr("cx", function (d) {return d.x;})
    .attr("cy", function (d) {return d.y;})
    .transition().duration(750)
    .style("fill", function (d) {
    return color(d.cluster)
});
// EXIT
// Remove old elements as needed.
circle.exit().remove();

更新数据后，每次都会运行force.start();，因此它看起来像新数据。如果删除它，则更容易看到发生了什么但是你丢失了动画。您可能想要的只是为新节点（以及可能退出节点）的条目设置动画，但这将是一个单独的问题

如何更新d3.js中的绑定数据？

2 个答案: