D3 force-directed layout是如何显示边缘的？答案

【问题标题】：D3 force directed layout is how showing the edges?D3 force-directed layout是如何显示边缘的？
【发布时间】：2020-08-07 07:37:44
【问题描述】：

我的程序就像在后端，它读入一个 csv 文件并解析它并将数据存储在一个二维数组中，并使用套接字 io 将其发送到前端，在前端，一旦数据是接收到后，它将数据存储到前端的二维数组中，并以有向图的形式显示。

但是，它无法在图表上显示边。这与边缘的颜色无关。我在前端文件中注释掉了一个数组调用 tempVar。当我使用该数组时，它可以显示边缘，但是当我使用边缘数组时，它不会显示边缘（我希望这些名称不会让您感到困惑）。我试图打印两个数组（tempVar 和边）的长度、内容和类型，它们都是一样的。我只是对问题可能是什么感到困惑？

这是后端文件（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');
});

这里是前端代码（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>

csv 文件 (graph.csv)

【问题讨论】：

请格式化您的代码并删除不必要的内容。它会让其他人更容易阅读和理解。
注意：您可能想知道为什么我定义了 clientReady() 而不是在套接字代码之后编写其余代码。那就是您必须确保边缘数组已准备好并在要显示它们时在其中包含数据。在套接字代码之后编写其余代码并不意味着当时已经定义了数组。

标签： javascript node.js d3.js

【解决方案1】：

好的，您忘记将文件中的值转换为 int 类型。每当您读取文件时，请注意您收到的值的类型，它们是字符串类型而不是 int 类型。

【讨论】：