D3力导向布局如何显示边缘？

Question

我的程序就像在后端，它读取一个csv文件并将其解析并将数据存储在2d数组中，并在接收到数据后使用Socket io将其发送到前端的前端，它将把数据存储到前端的2d数组中，并在力导向图中显示。

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

这里是后端文件（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) {
      //csvData.push(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）

Answer 1

[确定，您忘记了将文件中的值转换为int类型。每当您读取文件时，请小心接收的值的类型，它们是字符串类型，而不是int类型。

D3力导向布局如何显示边缘？

问题描述投票：0回答：1

1个回答

最新问题

D3力导向布局如何显示边缘？

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1