Question

也许这是一个愚蠢的问题，但我是d3 newb。我正在尝试根据源链接权重更改力布局中圆的半径。为什么d.source.weight可以在tick函数中访问，但不能在其他任何地方访问？

E.g。

force.on("tick", function() {
    link.attr("x1", function(d) {console.log(d.source.name + " " + d.source.weight; 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; });

将正确的值返回给控制台，但为什么在追加圆圈时不能访问这些属性？

node.append("circle")
     .attr("class", "node")
     .attr("r", function(d) {return d.source.weight * 2;});  // breaks

我觉得这更像是一个基本的javascript问题，而不是d3问题，但我找不到太多帮助。任何帮助表示赞赏。

Answer 1

tick函数不会改变设置.attr("r", ect )时发生的情况;你正在改变你正在设置的内容：

链接

link.attr("x1", function(d) {console.log(d.source.name + " " + d.source.weight; return d.source.x; })

<强>节点

node.append("circle") .attr("class", "node") .attr("r", function(d) {return d.source.weight * 2;}); // breaks

我猜你正在使用this example。您可以通过在引用source时阅读API的第38-69行来弄清楚节点的不同之处。尽管如此，这可能是棘手的，也是一种骚扰;我建议用示例打开控制台并稍微玩一下，以便更好地了解发生了什么。

我建议您尝试使用其中的一些命令（使用chrome，这样您也可以轻松检查对象并查看连接到节点和链接的数据的属性）：

node.attr("r", function(d){ return 8; }) node.attr("r", function(d){ return d.weight; }) link.attr("class", "") link.attr("stroke", "yellow")

Answer 2

node.append("circle")
     .attr("class", "node")
     .attr("r", function(d) {return d.weight * 2;});  // breaks

删除“.source”你正在使用这种情况下的节点函数（d）{...}而不是链接。

如何在强制布局中访问节点的权重属性？

2 个答案: