Question

我有不同日子的网络数据，我将其绘制为每一天的力导向图。当我按下按钮时，网络部分（删除节点，绘制新节点）更新到第二天。除了一件事，一切都很好。

对于每一个新的一天，我都会从我的数据中更新我的nodes-array的一些属性（例如节点的程度）。这也可以正常工作，因为我可以看到在切换到第二天后我只看了我的nodes-array时属性已经正确更新了。但是命令

     `.append("circle").attr("r", function(d) { return 2*d.Degree+10; })`

不是使用新属性进行的，并且节点的半径不代表图表显示日期的节点程度。

如何更新我的图形，以便使用Degree的新值来定义节点的半径？

这是我的函数start（），我在操作数据后绘制图形：

function start() {

var force = d3.layout.force()
    .charge(-130)
    .linkDistance(230)
    .size([width, height]);

force.nodes(nodes)
    .links(edges)

linkOP = linkOP.data(edges, function(d) { return d.source.id + "-" + d.target.id; });
linkOP.enter().insert("line", ".node1")
    .attr("class", "link1")
    .style("stroke-width", function(d) {
        return 2*d.weight.weight;
      });
linkOP.exit()
    .remove();

nodeOP = nodeOP.data(nodes, function(d) { return d.id;});
nodeOP.enter()  
    .append("g")
    .append("circle")
    .attr("r",   function(d) { return 2*d.Degree+10; })
    .attr("class", "node")
    .style("fill", function(d) { return color(d.bipartite); });

nodeOP.append("title").text(function(d) { return d.name; });
nodeOP.call(force.drag);
nodeOP.append("text")
    .text(function(d) { return d.id; });
nodeOP.moveToFront();
nodeOP.exit().remove();

force.start();

clean();

force.on("tick", function() {
    linkOP.attr("x1", function(d) { return d.source.x; })
        .attr("y1", function(d) { return d.source.y; })
        .attr("x2", function(d) { return d.target.x; })
        .attr("y2", function(d) { return d.target.y; });

    nodeOP.attr("cx", function(d) { return d.x; })
        .attr("cy", function(d) { return d.y; });

    nodeOP.attr("transform", function (d) {
        return "translate(" + d.x + "," + d.y + ")";
    });

});

}

我知道这是一个非常简单的问题...非常感谢你的帮助！

Answer 1

您的代码没有半径更新。 .enter（）调用的所有内容仅适用于新项目。所以因为你只有行

.append("circle").attr("r", function(d) { return 2*d.Degree+10; })`

在.enter内部，该部分仅出现在新节点上。

我在输入，更新，退出时构建了一个jsfiddle。这里：http://jsfiddle.net/TheMcMurder/H3HTe/

我希望有帮助

D3强制布局节点属性未正确更新

1 个答案: