封装在 HTML 页面中的 Javascript D3 树可视化答案

【问题标题】：Javascript D3 Tree Visualization Wrapped in HTML Page封装在 HTML 页面中的 Javascript D3 树可视化
【发布时间】：2014-06-16 12:02:31
【问题描述】：

收到以下错误消息：错误：解析 d="M,CNaN, NaN, ,"

时出现问题

我正在基于 Flare 示例（位于 http://mbostock.github.io/d3/talk/20111018/tree.html）构建 D3 树。

我的主要目标是更改向 Tree 呈现代码提供数据的方式。在原始示例中，数据是通过 JSON 文件提供的。在我的示例中（位于：http://bl.ocks.org/Guerino1/raw/ed80661daf8e5fa89b85），我试图以更符合 RDF/OWL 外观的方式提供数据（即直接提供一组节点和一组单独的链接/关系)。

我已将位于 index.html 文件顶部的输入数据更改为如下所示：

  var nodeSet = [
    {name: "N0", type: "Type 1", hlink: "http://www.if4it.com"},
    {name: "N1", type: "Type 2", hlink: "http://www.if4it.com/glossary.html"},
    {name: "N2", type: "Type 2", hlink: "http://www.if4it.com/resources.html"},
    {name: "N3", type: "Type 3", hlink: "http://www.if4it.com/taxonomy.html"},
    {name: "N4", type: "Type 4", hlink: "http://www.if4it.com/disciplines.html"},
    {name: "N5", type: "Type 1", hlink: "http://www.if4it.com"},
    {name: "N6", type: "Type 2", hlink: "http://www.if4it.com/glossary.html"},
    {name: "N7", type: "Type 1", hlink: "http://www.if4it.com"},
    {name: "N8", type: "Type 2", hlink: "http://www.if4it.com/disciplines.html"}
  ];

  var linkSet = [
    {source: "N0", target: "N1"},
    {source: "N1", target: "N2"},
    {source: "N2", target: "N3"},
    {source: "N0", target: "N4"},
    {source: "N4", target: "N5"},
    {source: "N0", target: "N6"},
    {source: "N6", target: "N7"},
    {source: "N6", target: "N8"}
  ];

大约在第 113 行，我使用以下代码解析链接以识别和分配子节点给 nodeSet 中的每个节点：

    linkSet.forEach(function(link) {
      var parent = link.source = nodeByName(link.source),
      child = link.target = nodeByName(link.target);
      if (parent.children) parent.children.push(child);
      else parent.children = [child];
    });

    function nodeByName(name) {
      return nodeSet[name] || (nodeSet[name] = {name: name});
    }

虽然一切似乎都可以正常工作，但每次我刷新或选择节点时，我的 Javascript 控制台仍然会看到一组“8”错误。错误出现在大约第 210 行的某处，即以下代码块：

      // Update the linksÃ¢â‚¬Â¦
      var link = vis.selectAll("path.link")
          .data(tree.links(nodes), function(d) { return d.target.id; });

      // Enter any new links at the parent's previous position.
      link.enter().insert("svg:path", "g")
          .style("fill", "none")
          .style("stroke", "#000")
          .attr("class", "link")
          .attr("d", function(d) {
            var o = {x: source.x0, y: source.y0};
            return diagonal({source: o, target: o});
          })
          .transition()
            .duration(duration)
            .attr("d", diagonal);

对问题可能是什么以及如何解决有任何想法？

感谢您提供的任何帮助。

【问题讨论】：

您的 source 对象没有您在上一个 sn-p 中绑定到 d 属性的函数中使用的任何 x0、y0 属性。
嗨 MarcoC1，谢谢！我整个周末都在盯着它看。介意我问你如何使用调试器找到它吗？（你在哪里设置断点并继续执行？）因为我似乎无法轻松地将代码跟踪到 D3 link.enter().insert() 块中。谢谢。
要调试它，我建议使用 Google Chrome DevTools：打开工具后，打开页面，在控制台中您将看到堆栈跟踪，展开它并单击第一行“（索引：N )”。在该行设置断点并重新加载页面。 ;)
太棒了！谢谢！你很有帮助。

标签： javascript d3.js tree visualization data-visualization

【解决方案1】：

问题在于“var nodes = tree.nodes(root);”如何方法有效。当它遍历链接集以创建节点树时，它没有使用原始的 nodeSet 结构，该结构包含有关每个节点的特征/详细信息。答案是必须将原始 nodeSet 中的详细信息合并回由 tree.nodes() 方法生成的节点树中。不幸的是，这只能通过节点的“另一个”迭代来完成。例如：

      // Normalize for fixed-depth.
      //nodes.forEach(function(d) { d.y = d.depth * 180; });
      nodes.forEach(function(d, i){
        d.y = d.depth * 180;
        d.name = nodeSet[i].name
        d.type = nodeSet[i].type
        d.hlink = nodeSet[i].hlink
      });

如果 tree.nodes() 方法有一个允许传入原始 nodeSet 的 API 那就太好了，这样合并可以在幕后更自然地发生，并且随着树的构建（没有事后增加额外迭代的开销）。

【讨论】：