javascript - 为什么这种树形布局会给我带来无限循环?

标签 javascript d3.js

我是 d3 的新手,正在尝试对一些 xml 数据进行简单的树布局。我在一些 d3 代码中遇到无限循环,并试图找出原因。这是我正在做的事情的简化,我仍然看到无限循环。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Spring Integration Inspector</title>
<script src="js/d3.js"></script>
<script type="text/javascript">
var parser = new DOMParser();
var xml = parser.parseFromString("<beans><bean/><bean><beanChild/></bean></beans>", "text/xml");

var tree = d3.layout.tree().children(function(beanNode) {
    var children = beanNode.getElementsByTagName("*");
    if (children.length > 0) {
        return children;
    } else {
        return null;    
    }
});

var nodes = tree.nodes(xml),
    links = tree.links(nodes);
</script>
</head>
<body>
<div id="graph"></div>
</body>
</html>

要重现,请将此代码复制到 index.html 文件中,并适本地包含 d3.js 库。这不会在浏览器中加载。我认为这与children功能有关。

<小时/>

编辑:

我正在 Chrome 中单步执行调试器,问题位于 apportion 方法内部。 while 循环永远不会中断。更具体地说, d3_layout_treeRight 和 d3_layout_treeLeft 方法(我认为分别尝试找到第一个子节点和最后一个子节点)只是在当前节点是叶子时返回当前节点.

node._tree.thread的值是d3_layout_treeRightd3_layout_treeLeft内部的当前节点。因此对这些方法的调用返回作为参数传入的节点。

最佳答案

d3-js google group 中所述,问题是我使用了 beanNode.getElementsByTagName("*") 而不是 beansNode.childNodes

关于javascript - 为什么这种树形布局会给我带来无限循环?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17755575/

相关文章:

Javascript 在本地主机上找不到 php 文件

javascript - 连接到 twitter api 时 Node.js 套接字挂断错误

d3.js - 为什么 d3.transition() 在 theUpdateSelection.transition() 起作用的地方不起作用?

javascript - spring - 如何将字符串传递给html上的javascript?

javascript查找没有id的节点

javascript - 你可以在 ionic Android 和 iOS 应用程序中使用 webRTC 吗?

javascript - 添加箭头以强制有向图从源到目标

javascript - 我们如何更改 d3.js 线图中线性比例生成的刻度值?

javascript - 放大世界地图上的 D3 弹出窗口大小

javascript - 使用JS获取Radiobutton的值