javascript - D3 从 CSV 强制布局，每行有多个边

Question

我正在尝试从每行包含多个边的 CSV 创建 D3(v3) 强制布局:

"c.compound","mt.entry","mt.protein_names","tt.gene_name","tt.gene_product","omcl.omcl_clusterid"
"TCMDC-143527","A0A059UE90","Glycogen synthase kinase-3 beta splice variant X1","TcCLB.507993.80","glycogen synthase kinase 3, putative","OG5_126888"
"TCMDC-143376","A0A059UE90","Glycogen synthase kinase-3 beta splice variant X1","TcCLB.507993.80","glycogen synthase kinase 3, putative","OG5_126888"
"TCMDC-143527","A0A059UE90","Glycogen synthase kinase-3 beta splice variant X1","Tb427.10.13780","glycogen synthase kinase 3","OG5_126888"
"TCMDC-143376","A0A059UE90","Glycogen synthase kinase-3 beta splice variant X1","Tb427.10.13780","glycogen synthase kinase 3","OG5_126888"
...

我需要这个力布局来反射(reflect)以下边缘:

c.compound -> mt.accession
mt.entry -> omcl.omcl_clusterid
tt.gene_name -> omcl.omcl_clusterid

我是 D3 的新手，所以我从 mbostock 提供的代码示例开始在github上。此示例接收一个 CSV 文件，逐行解析它，并从 CSV 中提取 A 到 B 边(逐行)，如下所示

source, target
"A", "B"
"B", "C"
...

我认为我可以通过每行进行一次额外的迭代并将所有链接存储在一个数组中然后正常进行...来使示例中的代码适应我的需要，如下所示:

  d3.csv("allomcl_putative_test.csv", function(error, links) {
  if (error) throw error;

  var nodesByName = {};
  var rels = [];
  // Create nodes for each unique source and target.
  links.forEach(function(link) {

      var compound = nodeByName(link["c.compound"]);
      var mt = nodeByName(link["mt.entry"]);
      var tt = nodeByName(link["tt.gene_name"]);
      var omcl = nodeByName(link["omcl.omcl_clusterid"]);

      rels.push({
          "source": compound.name,
          "target": mt.name
      });
      rels.push({
          "source": mt.name,
          "target": omcl.name
      });
      rels.push({
          "source": tt.name,
          "target": omcl.name
      });

  });

  rels.forEach(function(d) {

      link = {
          "source": d.source,
          "target": d.target
      };
  });

...

我已登录到控制台，链接和节点都已正确收集，但我无法启动强制布局。 Javascript控制台会提示如下错误:

TypeError: r.source is undefined[Learn More]
d3.v3.min.js:4:22668
ao.layout.force/l.start
https://d3js.org/d3.v3.min.js:4:22668
<anonymous>
file:///root/to/my/file/test.js:74:7
Cn/u.send/<
https://d3js.org/d3.v3.min.js:1:11277
t
https://d3js.org/d3.v3.min.js:1:1563
i
https://d3js.org/d3.v3.min.js:1:10130

关于如何修复它有什么想法吗？

Answer 1

发现问题。边缘不能是源字符串或目标字符串(至少在 D3 v3 中)，因此有必要添加创建链接传递索引而不是名称。为此，我首先调整了 nodeByName 函数:

  function nodeByName(name) {
      return nodesByName[name] || (nodesByName[name] = {
          name: name,
          index: nodeid++
      });
  }

... nodeid 是在 csv 解析之前创建的变量，并随着每个节点的创建自动递增。

然后我更改了边创建代码块以使用这些索引:

  rows.forEach(function(link) {

      var compound = nodeByName(link["c.compound"]);
      var mt = nodeByName(link["mt.entry"], link["mt.protein_names"]);
      var tt = nodeByName(link["tt.gene_name"], link["tt.gene_product"]);
      var omcl = nodeByName(link["omcl.omcl_clusterid"]);          

      rels.push({
          "source": compound.index,
          "target": mt.index
      });
      rels.push({
          "source": mt.index,
          "target": omcl.index
      });
      rels.push({
          "source": tt.index,
          "target": omcl.index
      });

  });

它现在按预期工作: