Javascript D3链接节点和动态数据_Javascript_Json_D3.js

Javascript D3链接节点和动态数据

javascript json d3.js

Javascript D3链接节点和动态数据,javascript,json,d3.js,Javascript,Json,D3.js,我的问题是，当我下载数据时，总是有两个节点在svg的左上角，我有很多错误，比如“属性y1=”NaN“”的值无效（更类似于此，但根据变量x1、y1、y2）。如何使它正常工作我的代码是： <!DOCTYPE html> <meta charset="utf-8"> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script

我的问题是，当我下载数据时，总是有两个节点在svg的左上角，我有很多错误，比如“属性y1=”NaN“”的值无效（更类似于此，但根据变量x1、y1、y2）。如何使它正常工作

我的代码是：

<!DOCTYPE html>
<meta charset="utf-8">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <style>

    .link {
      fill: none;
      stroke: #666;
      stroke-width: 1.5px;
    }

    .node circle {
      fill: #ccc;
      stroke: #fff;
      stroke-width: 1.5px;
    }

    text {
      font: 10px sans-serif;
      pointer-events: none;
    }

    </style>
<body>
    <script>
        var links = [];
        var nodes = [];

        var width = 960,
            height = 500;

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

        var force = d3.layout.force()
            .nodes(d3.values(nodes))
            .links(links)
            .size([width, height])
            .linkDistance(60)
            .charge(-300)
            .start();

        var findNodeIndex = function(name) {
            for (var i in nodes) {
                if (nodes[i]["name"]==name){
                    return nodes[i];
                }
            };
        };

        $.get("/getAirportConnection?airportFrom=STN", function (data) { //this downloads data in JSON
            data.forEach(function (link) {
                link.source = nodes[link.airportFrom] || (nodes[link.airportFrom] = {name: link.airportFrom});
                link.target = nodes[link.airportTo] || (nodes[link.airportTo] = {name: link.airportTo});
                links.push({source: findNodeIndex(link.airportFrom), target: findNodeIndex(link.airportTo)}); // when I delete this line there is no links between nodes
            });

            var force = d3.layout.force()
                .nodes(d3.values(nodes))
                .links(links)
                .size([width, height])
                .linkDistance(60)
                .charge(-300)
                .on("tick", tick)
                .start();

            var link = svg.selectAll(".link")
                .data(force.links())
                .enter().append("line")
                .attr("class", "link");

            var node = svg.selectAll(".node")
                .data(force.nodes())
                .enter().append("g")
                .attr("class", "node")
                .call(force.drag);

            node.append("circle")
                .attr("r", 8);

            node.append("text")
                .attr("x", 12)
                .attr("dy", ".35em")
                .text(function(d) { return d.name; });

            function tick() {
                link
                    .attr("x1", function(d) { return d.source.x; })
                    .attr("y1", function(d) { return d.source.y; })
                    .attr("x2", function(d) { return d.target.x; })
                    .attr("y2", function(d) { return d.target.y; });

                node
                    .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
            }

        });
    </script>
</body>

您正在设置不必要的属性，也不需要使用

findNodeIndex

函数，这就是问题所在。某些节点未正确匹配。你可以简单地写

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

完整的例子

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