未捕获的类型错误：无法调用未定义的方法“推送”（d3 强制布局）答案

【问题标题】：Uncaught TypeError: Cannot call method 'push' of undefined (d3 force layout)未捕获的类型错误：无法调用未定义的方法“推送”（d3 强制布局）
【发布时间】：2013-06-19 01:09:27
【问题描述】：

我无法弄清楚为什么我一生都会收到此错误（使用强制布局）。当我切换到从 json 文件中读取节点时，它就开始了。如果我取消注释下面的行，它不会引发错误。如果我按原样离开，我会得到“无法调用未定义的方法'push'”。我不确定问题是什么。我错过了什么吗？

<html>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
<script>

   d3.json("http://katejustin.com/autosys1.json", function(data) {

   //var nodes = {};

   //data.links.forEach(function(link) {
   //   link.source = nodes[link.source] || (nodes[link.source] = {name: link.source});
   //   link.target = nodes[link.target] || (nodes[link.target] = {name: link.target}); });


var width = 200,
    height = 200;

var svg = d3.select("body").append("svg:svg")
    .attr("width", width)
    .attr("height", height);

var force = d3.layout.force()
    //.nodes(d3.values(nodes))
    .nodes(data.nodes)
    .links(data.links)
    .size([width, height])
    .distance(100)
    .charge(-1000)
    .start();
});
</script>
</html>

【问题讨论】：

-1，隔离问题
您可以使用其下方的“编辑”按钮修改您的原始帖子。主要问题是您发布的第二个代码块。太多了。
还有太多多余的东西。隔离问题的主要思想是制作一个测试文件，其中包含最低限度的问题。例如，如果您在创建 5 个包含 22 个子菜单的下拉菜单时遇到问题，那么隔离问题只会有 1 个下拉菜单和 1 个子菜单和最少的 CSS/JS。
我删除了其余的代码，所以它实际上并没有做任何事情，但它仍然会中断我的原始邮件，除非我取消注释掉这些行。
检查data.nodes和data.links是否有值

标签： javascript d3.js force-layout

【解决方案1】：

问题是您尝试通过链接中的name 访问节点。在原始实现中，您通过索引访问节点。

这是我通常在这些情况下使用的一个技巧，即使我确信存在更简单的方法：

var findNode = function(id) {
    for (var i in force.nodes()) {
        if (force.nodes()[i]["name"] == id) return force.nodes()[i]
    };
    return null;
}

var pushLink = function (link) {
    //console.log(link)
    if(findNode(link.source)!= null && findNode(link.target)!= null) {        
        force.links().push ({
            "source":findNode(link.source),
            "target":findNode(link.target)
        })
    }
}

var force = d3.layout.force()
    .nodes(data.nodes)
    .size([width, height])
    .distance(100)
    .charge(-1000)
    .start();

data.links.forEach(pushLink)

因此，这些函数的目标是用代表force.nodes 中节点的实际对象替换每个链接、其源和目的地。

你可以在这里找到一个工作的 jsFiddle：http://jsfiddle.net/chrisJamesC/nrbQ4/1/ （通过控制台查看，因为可视化中没有显示任何内容）。

【讨论】：

谢谢，这很有帮助。您能解释一下它与此有何不同吗？ bl.ocks.org/mbostock/4062045 那是直接从 JSON 中获取节点数组，这就是我想要做的。还是因为该 JSON 中的链接引用了节点的索引。因此，在您的示例中，您基本上是通过索引查找节点并将它们存储在源/目标链接数组中。这是有道理的。
没错。节点由链接的源和目标中的索引引用。