Javascript D3.js-节点堆叠在图的左上角 太长，读不下去了
基于多个XML数据源构建力定向图时，所有节点都堆叠在图的左上角。假设控制台中没有显示错误，并且所有节点和链接都已正确加载到AIK中，那么是什么D3.js错误配置导致了这种行为 处境 基于Mike Bostock的示例，该示例使用XML实现了强制导向布局 ，我正在使用d3.queue加载多个XML文件，并尝试显示力图。当我使用一个XML文件时，图形显示1个节点。但是，当我使用多个XML时，图表会在左上角显示所有节点。控制台不会显示任何错误，并且所有必需的节点和链接对象都已正确加载到AIK中 鉴于 编辑：我已将代码缩减到最低限度，以重现问题。 需要四个文件。两个小xml文件，一个json文件和html文件 FileList.jsonJavascript D3.js-节点堆叠在图的左上角 太长，读不下去了,javascript,json,xml,d3.js,queue,Javascript,Json,Xml,D3.js,Queue,基于多个XML数据源构建力定向图时，所有节点都堆叠在图的左上角。假设控制台中没有显示错误，并且所有节点和链接都已正确加载到AIK中，那么是什么D3.js错误配置导致了这种行为 处境 基于Mike Bostock的示例，该示例使用XML实现了强制导向布局 ，我正在使用d3.queue加载多个XML文件，并尝试显示力图。当我使用一个XML文件时，图形显示1个节点。但是，当我使用多个XML时，图表会在左上角显示所有节点。控制台不会显示任何错误，并且所有必需的节点和链接对象都已正确加载到AIK中 鉴于
[
"City.hbm.xml",
"Country.hbm.xml"
]
<?xml version="1.0"?>
<!DOCTYPE hibernate-mapping PUBLIC "-//Hibernate/Hibernate Mapping DTD 3.0//EN"
"http://hibernate.sourceforge.net/hibernate-mapping-3.0.dtd">
<hibernate-mapping>
<class name="nl.sander.mieras.localhost.sakila.City" table="city" catalog="sakila">
<!-- removed for readability -->
</class>
</hibernate-mapping>
<?xml version="1.0"?>
<!DOCTYPE hibernate-mapping PUBLIC "-//Hibernate/Hibernate Mapping DTD 3.0//EN"
"http://hibernate.sourceforge.net/hibernate-mapping-3.0.dtd">
<hibernate-mapping>
<class name="nl.sander.mieras.localhost.sakila.Country" table="country" catalog="sakila">
<!-- removed for readability -->
</class>
</hibernate-mapping>
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.link {
stroke: #ccc;
}
.node {
fill: #000;
stroke: #fff;
stroke-width: 2px;
}
</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//d3js.org/d3-queue.v2.min.js"></script>
<script>
var width = 960,
height = 500;
var radius = d3.scale.sqrt()
.domain([0, 20000])
.range([0, 20]);
var force = d3.layout.force()
.charge(-240)
.linkDistance(40)
.size([width, height]);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
d3.json("FileList.json", function (error, fileArray) {
var q = d3_queue.queue();
fileArray.forEach(function (d) {
q = q.defer(d3.xml, d);
});
q.await(analyze);
});
function analyze(error) {
if (error) {
console.log(error);
}
// skip 0 it's error variable
for (i = 1; i < arguments.length; i++) {
var xml = arguments[i];
var nodes = [];
var label = d3.select(xml).select("class").attr("table").charAt(0).toUpperCase() + d3.select(xml).select("class").attr("table").slice(1);
nodes.push({
"id": nodes.length,
"label": label
});
console.log(nodes);
node = nodes[0];
node.x = width / 2;
node.y = height / 2;
force
.nodes(nodes)
.start();
var node = svg.selectAll(".node")
.data(nodes)
.enter().append("circle")
.attr("class", "node")
.attr("r", 20)
.call(force.drag);
force.on("tick", function () {
node.attr("cx", function (d) {
return d.x;
})
.attr("cy", function (d) {
return d.y;
});
});
}
}
</script>
.链接{
冲程：#ccc；
}
.节点{
填写：#000；
冲程：#fff；
笔画宽度：2px；
}
可变宽度=960，
高度=500；
var radius=d3.scale.sqrt（）
.domain（[0，20000]）
.范围（[0,20]）；
var-force=d3.layout.force（）
。收费（-240）
.linkDistance（40）
.尺寸（[宽度、高度]）；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）；
d3.json（“FileList.json”，函数（错误，fileArray）{
var q=d3_queue.queue（）；
forEach（函数（d）{
q=q.defer（d3.xml，d）；
});
q、 等待（分析）；
});
函数分析（错误）{
如果（错误）{
console.log（错误）；
}
//跳过0它的错误变量
对于（i=1；i是否循环所有xml文件，但每次都覆盖节点数组？这是有意的吗？我想你想建立一个阵列。此外，链接数组的格式似乎不正确。您最终得到一个数组，其中源和目标是字符串，它们应该是节点的数组索引。在不知道您对
链接节点