D3 force directed layout is how showing the edges?

Question

My program is like on the back end, it reads in a csv file and parses it and stores the data in a 2d array and use socket io to send it to the front end, on the front end, once the data is received, it will store the data into a 2d array in the front end and displays it in a force-directed graph.

However, it can't display the edges on the graph. It is not about the color of the edges. I commented out an array call tempVar in the front end file. When I used that array, it could display the edges, but when I used the edges array, it wouldn't display the edges(I hope the names won't confuse you). I have tried to print the length, the content, and the type of both arrays(tempVar and edges), they were all the same. I am just confused about what the problem could be?

Here is the back end file(app.js):

var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);

var parse = require('csv-parse');
var fs = require('fs');

// Create an object to hold the datas
var csvData = new Array();

var count = 0;

// Read in the file and seperate the value by commas
fs.createReadStream(__dirname + '/graph.csv')
   .pipe(
      parse({
         delimiter: ','
      })
   )
   .on('data', function(dataRow) {
      var size = Object.keys(dataRow).length;

      csvData[count] = [[],[]];
      for(var i = 0; i < size; i++){
         csvData[count][i] = dataRow[i];
      }
      count++;
   })
   .on('end', function(){
      // do nothing
   });

app.get('/', function(req, res) {
   res.sendfile('index.html');
});

io.on('connection', function(socket) {
   console.log('A user connected');

   socket.emit('testerEvent', csvData);

   socket.on('disconnect', function () {
      console.log('A user disconnected');
   });
});

http.listen(3000, function() {
   console.log('listening on localhost:3000');
});

Here is the front end code(index.html):

<!DOCTYPE html>
<html>
   <head>
      <title>Hello world</title>
   </head>
   <script src = "/socket.io/socket.io.js"></script>
   <style type="text/css">
    .node {
        fill: #ccc;
        stroke: #fff;
        stroke-width: 1px;
    }

    .link {
        stroke: #000;
        stroke-width: 2px;
    }

   </style>
   <body>
    <script src="https://d3js.org/d3.v3.min.js"></script>


   <script>
    var width = 640, height = 480;

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

    var nodes = [
                { "x": 208.992345, "y": 273.053211 },
                { "x": 595.98896,  "y":  56.377057 },
                { "x": 319.568434, "y": 278.523637 },
                { "x": 214.494264, "y": 214.893585 },
                { "x": 482.664139, "y": 340.386773 },
                { "x":  84.078465, "y": 192.021902 },
                { "x": 196.952261, "y": 370.798667 },
                { "x": 107.358165, "y": 435.15643  },
                { "x": 401.168523, "y": 443.407779 },
                { "x": 508.368779, "y": 386.665811 },
                { "x": 355.93773,  "y": 460.158711 },
                { "x": 283.630624, "y":  87.898162 },
                { "x": 194.771218, "y": 436.366028 },
                { "x": 477.520013, "y": 337.547331 },
                { "x": 572.98129,  "y": 453.668459 },
                { "x": 106.717817, "y": 235.990363 },
                { "x": 265.064649, "y": 396.904945 },
                { "x": 452.719997, "y": 137.886092 }
    ];

    var edges = [];

    //----------  Socket Code -----------------
    var socket = io();
    socket.on('testerEvent', function(data){
        for(var i = 0; i < data.length; i++){
            var temp = new Object();
            temp.target = data[i][0];
            temp.source = data[i][1];
            edges[i] = temp;
        }

        clientReady();
      });
    //------------- Socket Code -----------------

    function clientReady(){

        var force = d3.layout.force()
            .size([width, height])
            .nodes(nodes)
            .links(edges);

        force.linkDistance(width/3.05);

        var link = svg.selectAll('.link')
            .data(edges)
            .enter().append('line')
            .attr('class', 'link');

        var node = svg.selectAll('.node')
            .data(nodes)
            .enter().append('circle')
            .attr('class', 'node');

        force.on('end', function() {
            node.attr('r', width/100)
                .attr('cx', function(d) { return d.x; })
                .attr('cy', function(d) { return d.y; });

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

        force.start();
    }

   </script>
   </body>
</html>

the csv file (graph.csv)

Answer 1

Ok, you forgot to convert the values from the file to type int. Whenever you are reading a file, just be careful the type of the value you are receiving, they are type of string not the type of int.

D3 force directed layout is how showing the edges?

Question

1 answers

solution1
0 ACCPTED 2020-04-25 04:25:02

D3 force directed layout is how showing the edges?

Question

1 answers

solution1 0 ACCPTED 2020-04-25 04:25:02

solution1
0 ACCPTED 2020-04-25 04:25:02