Question

我试图在D3上进行力布局，以便通过节点和链接进行网络可视化。我一直在使用v3，但我切换到v5是为了能够使用节点属性而不是节点索引链接节点（这需要d3 v3中的附加步骤）。

我收到了这段代码

https://jsfiddle.net/lioneluranl/4fxpp2co/1/

var linkpath = ("links.csv");
var nodepath = ("nodes.csv");
var svg = d3.select("svg");
var width = svg.attr("width");
var height = svg.attr("height");
var simulation = d3.forceSimulation();   

var nodes = [];
var links = [];

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);

  });

}).then( function() {

  //console.log(links);
  //console.log(nodes);

  simulation
      .force("link", d3.forceLink().id(function(d) { /*console.log(d);*/ return d.id; }))
      .nodes(nodes)      
      .force("collide", d3.forceCollide().radius(10))
      .force("r", d3.forceRadial(function(d) { 
        if(d.group === "compound"){          
          return 240;
        } else { return d.group === "annotation" ? 0 : 100; }}))      

  // Create the link lines.
  var link = svg.append("g")
    .attr("class", "links")
    .selectAll("line")
    .data(links)
    .enter().append("line")
    .attr("stroke", "black")
    .attr("stroke-width", 4)
    .attr("class", function(d) { return "link " + d.type; });

  // Create the node circles.
 var node = svg.append("g")
      .attr("class", "node")
      .selectAll("circle")
      .data(nodes)
      .enter().append("circle")
      .attr("r", 8)
      .attr("class", function (d){ 

        return d.group;

      });

 simulation.on("tick", ticked);
 simulation.force("link").links(links);

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

  link.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; });
}


});

哪个已经改编自

https://bl.ocks.org/mbostock/cd98bf52e9067e26945edd95e8cf6ef9

我绘制节点没有问题，但是我无法绘制链接。相关文档表明，正如我认为的那样，必须将节点属性传递给强制模拟的链接，但是我收到了这个错误：

TypeError: can't assign to property "vx" on "PF05257": not an object

此外，在执行此操作时，节点不会在布局上按预期运行（径向力设置无法正常工作，请参见附图），这表明此逐节点属性正在混乱我的模拟。

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
...

仅供参考和数据完整性检查，我在d3 v3上进行了此操作。

有什么想法吗？

Answer 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的行函数的一部分，显然不起作用。

这里的正确方法是嵌套promises（对某些人来说是一种反模式），或者甚至更好地使用Promise.all（因为v5中没有d3.queue）：

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
});

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

此外，您不需要两个CSV的行功能，因为您的行功能现在没有做任何事情（除了将node复制为id它们只是返回与您相同的对象没有他们会。）

以下是使用Promise.all：

的代码和数据的bl.ocks

https://bl.ocks.org/GerardoFurtado/30cb90cc9eb4f239f59b323bbdfe4293/3049fc77b8461232b6b149f39066ec39e0d111c1

¹大多数文本编辑器，如Sublime Text，都有缩进插件。您还可以在线找到几个好工具，例如like this one。

无法使用D3 force layout按节点属性绘制链接

1 个答案: