stackoom
  简体   繁体   中英

D3 linking and nodes and dynamic data

 原文  2014-04-25 16:45:30  1   1    javascript/ json/ d3.js

Question

My problem is that when I download data, always two nodes are in the left-top corner of my svg and I have a lot of errors saying "Invalid value for attribute y1="NaN"" (and more like this, but according to variable x1, y1, y2). How to make it work properly?

My code js is: 

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

And my JSON data downloaded from server is this one: 

[{"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"}]

1 answers

solution1
 2 ACCPTED  2014-04-25 18:33:21

You are setting unnecessary attributes and don't need to use the findNodeIndex function either -- this is where the problem is. Some of the nodes are not being matched up correctly. You can simply write 

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})});
        });

Complete example here .

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question D3 force layout - linking nodes by name instead of index D3 Linking nodes based on names rather than index Linking bar graph data to d3 tooltip updating d3 data to the child nodes Load json data into D3 nodes dynamically Binding data to D3 bubble nodes d3 complex data, updating for existing nodes D3 dynamic network slow when adding nodes realtime D3 metadata on nodes D3 nodes overlapping
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM