javascript - 如何访问力布局中节点的权重属性？

Question

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

例如

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 的第 38-69 行来找出节点的不同之处。同时引用 API .不过，这可能很棘手，有点困难；我建议打开带有该示例的控制台并稍微尝试一下，以更好地了解正在发生的事情。

我建议尝试其中的一些命令(使用 chrome，这样您还可以轻松检查对象并查看连接到节点和链接的数据具有哪些属性):

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

link.attr("class", "")
link.attr("stroke", "yellow")