javascript - D3 链接和节点以及动态数据

我的问题是，当我下载数据时，我的 svg 的左上角总是有两个节点，而且我有很多错误提示“属性 y1 的无效值 y1="NaN"”(更像这样，但根据变量 x1、y1、y2)。如何让它正常工作？

我的js代码是:

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

我从服务器下载的JSON数据是这个:

[{"airportFrom":"STN","airportTo":"MXP"},{"airportFrom":"STN","airportTo":"CIY"},{"airportFrom":"STN","airportTo":"GNB"},{"airportFrom":"STN","airportTo":"RJK"},{"airportFrom":"STN","airportTo":"OSR"},{"airportFrom":"STN","airportTo":"TLL"},{"airportFrom":"STN","airportTo":"EFL"},{"airportFrom":"STN","airportTo":"SXB"},{"airportFrom":"STN","airportTo":"NUE"},{"airportFrom":"STN","airportTo":"AAR"},{"airportFrom":"STN","airportTo":"AGP"},{"airportFrom":"STN","airportTo":"AHO"},{"airportFrom":"STN","airportTo":"AOI"},{"airportFrom":"STN","airportTo":"BDS"},{"airportFrom":"STN","airportTo":"BGY"},{"airportFrom":"STN","airportTo":"BIQ"},{"airportFrom":"STN","airportTo":"BRE"},{"airportFrom":"STN","airportTo":"BRI"},{"airportFrom":"STN","airportTo":"BRQ"},{"airportFrom":"STN","airportTo":"BTS"},{"airportFrom":"STN","airportTo":"BZG"},{"airportFrom":"STN","airportTo":"CCF"},{"airportFrom":"STN","airportTo":"CIA"},{"airportFrom":"STN","airportTo":"DNR"},{"airportFrom":"STN","airportTo":"DUB"},{"airportFrom":"STN","airportTo":"EGC"},{"airportFrom":"STN","airportTo":"EIN"},{"airportFrom":"STN","airportTo":"FKB"},{"airportFrom":"STN","airportTo":"GDN"},{"airportFrom":"STN","airportTo":"GOA"},{"airportFrom":"STN","airportTo":"GRO"},{"airportFrom":"STN","airportTo":"GSE"},{"airportFrom":"STN","airportTo":"HAU"},{"airportFrom":"STN","airportTo":"HHN"},{"airportFrom":"STN","airportTo":"IBZ"},{"airportFrom":"STN","airportTo":"KIR"},{"airportFrom":"STN","airportTo":"KRK"},{"airportFrom":"STN","airportTo":"KTW"},{"airportFrom":"STN","airportTo":"KUN"},{"airportFrom":"STN","airportTo":"LCJ"},{"airportFrom":"STN","airportTo":"LEJ"},{"airportFrom":"STN","airportTo":"LDY"},{"airportFrom":"STN","airportTo":"LEI"},{"airportFrom":"STN","airportTo":"LIG"},{"airportFrom":"STN","airportTo":"LNZ"},{"airportFrom":"STN","airportTo":"LRH"},{"airportFrom":"STN","airportTo":"LUZ"},{"airportFrom":"STN","airportTo":"MAD"},{"airportFrom":"STN","airportTo":"MJV"},{"airportFrom":"STN","airportTo":"MLA"},{"airportFrom":"STN","airportTo":"MMX"},{"airportFrom":"STN","airportTo":"MRS"},{"airportFrom":"STN","airportTo":"NOC"},{"airportFrom":"STN","airportTo":"NRN"},{"airportFrom":"STN","airportTo":"NYO"},{"airportFrom":"STN","airportTo":"OPO"},{"airportFrom":"STN","airportTo":"ORK"},{"airportFrom":"STN","airportTo":"PEG"},{"airportFrom":"STN","airportTo":"PFO"},{"airportFrom":"STN","airportTo":"PGF"},{"airportFrom":"STN","airportTo":"PIS"},{"airportFrom":"STN","airportTo":"PMF"},{"airportFrom":"STN","airportTo":"POZ"},{"airportFrom":"STN","airportTo":"PSR"},{"airportFrom":"STN","airportTo":"PUY"},{"airportFrom":"STN","airportTo":"REU"},{"airportFrom":"STN","airportTo":"RDZ"},{"airportFrom":"STN","airportTo":"RIX"},{"airportFrom":"STN","airportTo":"RZE"},{"airportFrom":"STN","airportTo":"SCQ"},{"airportFrom":"STN","airportTo":"SDR"},{"airportFrom":"STN","airportTo":"SNN"},{"airportFrom":"STN","airportTo":"SVQ"},{"airportFrom":"STN","airportTo":"SXF"},{"airportFrom":"STN","airportTo":"SZG"},{"airportFrom":"STN","airportTo":"SZZ"},{"airportFrom":"STN","airportTo":"TFS"},{"airportFrom":"STN","airportTo":"TLN"},{"airportFrom":"STN","airportTo":"TMP"},{"airportFrom":"STN","airportTo":"TRF"},{"airportFrom":"STN","airportTo":"TRN"},{"airportFrom":"STN","airportTo":"TRS"},{"airportFrom":"STN","airportTo":"TUF"},{"airportFrom":"STN","airportTo":"VLC"},{"airportFrom":"STN","airportTo":"WRO"},{"airportFrom":"STN","airportTo":"XRY"},{"airportFrom":"STN","airportTo":"ZAZ"},{"airportFrom":"STN","airportTo":"VST"},{"airportFrom":"STN","airportTo":"ALC"},{"airportFrom":"STN","airportTo":"PMI"},{"airportFrom":"STN","airportTo":"BLL"},{"airportFrom":"STN","airportTo":"FAO"},{"airportFrom":"STN","airportTo":"BLQ"},{"airportFrom":"STN","airportTo":"FMM"},{"airportFrom":"STN","airportTo":"RYG"},{"airportFrom":"STN","airportTo":"ACE"},{"airportFrom":"STN","airportTo":"LPA"},{"airportFrom":"STN","airportTo":"FUE"},{"airportFrom":"STN","airportTo":"PDV"},{"airportFrom":"STN","airportTo":"LDE"},{"airportFrom":"STN","airportTo":"ZAD"},{"airportFrom":"STN","airportTo":"PMO"},{"airportFrom":"STN","airportTo":"SKG"},{"airportFrom":"STN","airportTo":"RHO"},{"airportFrom":"STN","airportTo":"SUF"},{"airportFrom":"STN","airportTo":"VNO"},{"airportFrom":"STN","airportTo":"CFU"},{"airportFrom":"STN","airportTo":"TSF"},{"airportFrom":"STN","airportTo":"BCN"},{"airportFrom":"STN","airportTo":"PSA"},{"airportFrom":"STN","airportTo":"FEZ"},{"airportFrom":"STN","airportTo":"RAK"},{"airportFrom":"STN","airportTo":"CHQ"},{"airportFrom":"STN","airportTo":"KGS"},{"airportFrom":"STN","airportTo":"BUD"},{"airportFrom":"STN","airportTo":"WMI"},{"airportFrom":"STN","airportTo":"MST"},{"airportFrom":"STN","airportTo":"RBA"},{"airportFrom":"STN","airportTo":"BOD"},{"airportFrom":"STN","airportTo":"LIS"},{"airportFrom":"STN","airportTo":"DTM"},{"airportFrom":"STN","airportTo":"BSL"},{"airportFrom":"STN","airportTo":"BVE"},{"airportFrom":"STN","airportTo":"OTP"},{"airportFrom":"STN","airportTo":"OSI"},{"airportFrom":"STN","airportTo":"TGD"},{"airportFrom":"STN","airportTo":"PRG"},{"airportFrom":"STN","airportTo":"SFT"},{"airportFrom":"STN","airportTo":"ATH"},{"airportFrom":"STN","airportTo":"CGN"}]

最佳答案

您正在设置不必要的属性，也不需要使用 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})});
        });

完整示例 here .

关于javascript - D3 链接和节点以及动态数据，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23298753/

javascript - D3 链接和节点以及动态数据

上一篇：javascript - 使用 WebAudioAPI 从 fft 返回哪种格式

下一篇：javascript - Safari 和 requestAnimationFrame 获取 DOMHighResTimestamp； window.performance 不可用