Question

TLDR;

在基于多个XML数据源构建强制定向图时，所有节点都会堆叠在图的左上角。鉴于控制台中没有显示错误，并且所有节点和链接都已正确加载，D3.js的错误配置会导致此行为吗？

情况

基于Mike Bostock的XML强制定向布局示例 https://bl.ocks.org/mbostock/1080941，我正在使用d3.queue加载多个XML文件，我正在尝试显示强制图。当我使用一个XML文件时，图表显示1个节点。但是，当我使用多个XML时，图表会显示左上角的所有节点。控制台不显示任何错误，并且所有必需的节点和链接对象都已正确加载。

鉴于

编辑：我已将代码减少到最低限度以重现问题。需要四个文件。两个小的xml文件，一个json文件和html文件。

FileList.json

[
"City.hbm.xml",
"Country.hbm.xml"
]

City.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>

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.Country" table="country" catalog="sakila">
        <!-- removed for readability -->
    </class>
</hibernate-mapping>

显着减少的html文件：

<!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>