PROSAGA码农传奇-边缘数据治理-d3 js分层边缘捆绑数据格式

<div class =“post-text”itemprop =“text”>
  
    如文档中所述
    <a href="https://github.com/mbostock/d3/wiki/Bundle-Layout" rel="noreferrer">
      捆绑布局
    </A>
    ，布局应用于数组
    
      链接
    
    ，每个都有一个
     <code>
 source
 </code>
     和
     <code>
 target
 </code>
     指向链接两端节点的属性。另外，这两个节点都需要一个
     <code>
 parent
 </code>
     指向层次结构中父节点的属性。
  
  
    这个数据（理想情况下）来自
    <a href="https://github.com/mbostock/d3/wiki/Cluster-Layout" rel="noreferrer">
      群集布局
    </A>
    ，在链接捆绑之前定位节点。群集布局将生成捆绑布局所需的数据（
     <code>
 cluster.nodes
 </code>
     函数返回的节点不仅仅是
     <code>
 parent
 </code>
     财产和
     <code>
 cluster.links
 </code>
     返回链接
     <code>
 source
 </code>
     和
     <code>
 target
 </code>
    ）。这意味着你只需要让群集布局变得愉快，你就可以了。
  
  
    您编写的代码存在一些问题。通常，不是修改数据以适合从示例中复制粘贴的可视化，而是更好地更新各种D3访问器以使用您拥有的数据格式。这就是他们在那里的原因。
  
  
    您复制的可视化在其数据清理中更加一致，因此您在那里引入了一些问题。我们只是解决它们，但你应该花一些时间来做对。第一个问题是您注意到的错误：
     <code>
 TypeError: node.parent.children is undefined
 </code>
    。这是因为你要进入1483号线
     <code>
 find
 </code>
     并尝试将子项添加到不存在的列表中。我们可以通过为此添加一个特定的检查来继续通过这里（虽然，如上所述，你应该实际上只是清理如何处理）：
  
   <pre>
 <code>
 if (typeof d.children === 'undefined') {
 d.children = []
}

</code>
 </pre>
  
    您还要添加一个名为空字符串的根节点。这是因为在第1481行你打电话
     <code>
 find
 </code>
     无论子串的长度如何。通过检查调用的返回值
     <code>
 lastIndexOf
 </code>
     您将知道节点是否具有父节点，在后一种情况下，设置
     <code>
 parent
 </code>
     至
     <code>
 null
 </code>
     （如
    <a href="https://github.com/mbostock/d3/wiki/Cluster-Layout" rel="noreferrer">
      文件
    </A>
     状态，
    
      parent - 父节点，或root的null
    
    ）。
  
  
    一旦我们解决了这些问题，你就会开始看到
     <code>
 TypeError: n is undefined
 </code>
    。这是因为您的数据不完整：您有对不存在的节点的引用，因此在第1510行您添加了一个没有的链接
     <code>
 target
 </code>
     属性，因此当您尝试捆绑链接时，布局将失败。暂时只需添加指向现有节点的链接就可以忽略这一点，但同样，你可能应该实际修复它而不是让它成为现实。
  
   <pre>
 <code>
 if (i in map) {
 imports.push({ source: map[d.name], target: map[i] });
}

</code>
 </pre>
  
    它的长短是，阅读文档，使用您的调试器，不要花时间去理解它，不要复制粘贴代码。
  
  
    <a href="http://jsfiddle.net/musakkhir/67oncb2t/1/" rel="noreferrer">
      的jsfiddle
    </A>
  
</DIV>