Javascript Can'；t使用D3 force布局按节点属性绘制链接

我正在尝试在D3上制作一个用于网络可视化的力布局，包括节点和链接。我已经使用了一点v3，但为了能够使用节点属性而不是节点索引链接节点（这需要D3V3中的附加步骤），我切换到了v5

我有这个密码

这是根据这个改编的

绘制节点没有问题，但无法绘制链接。相关文档表明，正如我所做的，节点属性必须在force simulation上传递给链接，但我得到以下错误：

TypeError:无法分配给“PF05257”上的属性“vx”：不是对象

此外，执行此操作时，节点在布局上的行为将不会如预期的那样（径向力集将不起作用，请参见所附图片），这表明“按节点链接”属性会干扰我的模拟

CSV包含以下数据：

nodes.csv：

node,group
C236103,compound
C327961,compound
C337527,compound
C376038,compound
C543486,compound
T24871,target
T27222,target
T33516,target
T33937,target
OG5_135897,annotation
PF01529,annotation
PF05257,annotation
PF11669,annotation
...

links.csv

source,target,type
T24871,PF05257,annotation
T27222,PF05257,annotation
T33516,PF01529,annotation
T33516,PF05257,annotation
T33516,PF11669,annotation
T33937,PF05257,annotation
T24871,C561727,bioactivity
T24871,C337527,bioactivity
T24871,C585910,bioactivity
...

只是为了参考和数据完整性检查，我在D3V3上做了这个。

---

有什么想法吗？

这里有一个建设性的批评：正确缩进代码1

我第一次读它时，由于缩进不正确，我错过了这个问题。但是，有了正确的缩进，问题就清楚了，看看这个：

d3.csv(nodepath, function(d) {
    node = {
        id: d.node,
        group: d.group,
        node: d.node
    };

    nodes.push(node);

    d3.csv(linkpath, function(d) {
        link = {
            source: d.source,
            target: d.target,
            type: d.type
        };

        links.push(link);

    });
})

不能像这样嵌套

d3.csv

。您的代码现在的方式第二个

d3.csv

是第一个

d3.csv

行函数的一部分，这显然不起作用

这里正确的方法是嵌套承诺（这对某些人来说是一种反模式），或者更好地使用

Promise.all

（因为v5中没有

d3.queue

）：

作为附加提示，您不需要将对象推送到外部作用域中的数组：只需处理

中的参数，然后

另外，两个CSV都不需要row函数，因为row函数现在没有做任何事情（除了将

node

as

id

复制为

id之外，它们只是返回与没有它们时相同的对象）

这是一个bl.ocks，包含您的代码和数据，使用
Promise。所有
：



大多数文本编辑器，如Sublime文本，都有缩进插件。例如，你也可以在网上找到一些好的工具
 啪。。。非常感谢你！我会继续测试它。很抱歉取消缩进问题。我使用了Jsfiddle美化函数，但并没有真正检查它是否正确缩进。
d3.csv(nodepath, function(d) {
    node = {
        id: d.node,
        group: d.group,
        node: d.node
    };

    nodes.push(node);

    d3.csv(linkpath, function(d) {
        link = {
            source: d.source,
            target: d.target,
            type: d.type
        };

        links.push(link);

    });
})

var promises = [d3.csv("nodes.csv"), d3.csv("links.csv")];

Promise.all(promises).then(function(data) {
    var links = data[1];
    var nodes = data[0];
    //rest of the code here
});