使用 Force Layout 从两个不同的 csv 文件中读取节点和边

Posted 2023-02-22

【中文标题】使用 Force Layout 从两个不同的 csv 文件中读取节点和边

【英文标题】：reading nodes and edges from two distinct csv files using Force Layout

【发布时间】：2013-08-02 18:58:46

【问题描述】：

我在尝试使用强制布局显示图表时遇到问题。我使用两个 csv 文件，一个用于顶点，一个用于边。我不确定，但我认为由于 d3.csv 方法是异步的，并且我使用其中两个，我需要将一个插入另一个以避免“并发”问题（最初我试图调用 d3.csv ） csv两次，分别，我遇到了麻烦）。

我的 csv 的结构如下：

对于边缘：

source,target
2,3
2,5
2,6
3,4

对于节点：

index,name
1,feature1
2,feature2
3,feature3

我最初的尝试是：

 // create the force layout
var force = d3.layout.force()
    .charge(-120)
    .linkDistance(30)
    .size([width, height]);

var node, linked;

// we read the edges
d3.csv("csvEdges.csv", function(error, data) 
    edg = data;

    // we read the vertices
    d3.csv("csvVertices.csv", function(error2, data2) 
        ver = data2;

        force.nodes(data2)
            .links(data)
            .start();

        node = svg.selectAll(".node")
            .data(data2)
           .enter()
            .append("circle")
            .attr("class", "node")
            .attr("r", 12)
            .style("fill", function(d) 
                return color(Math.round(Math.random()*18));
            )  
            .call(force.drag);

        linked = svg.selectAll(".link")
            .data(data)
           .enter()
            .append("line")
            .attr("class", "link"); 

        force.on("tick", function() 
            linked.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("cx", function(d)  return d.x; )
                .attr("cy", function(d)  return d.y; );
        ); 

但我明白了：

"TypeError: Cannot call method 'push' of undefined."

我不知道是什么问题；我认为这与链接的推送有关。我读到这个问题可能与 d3 如何将链接与节点对象匹配（在这种情况下，我的节点有两个字段）。所以我尝试了以下方法（我在这里的其他问题中看到了这个）：

// we read the edges
d3.csv("csvEdges.csv", function(error, data) 
    edg = data;

    // we read the vertices
    d3.csv("csvVertices.csv", function(error2, data2) 
        ver = data2;

        force.nodes(data2)
            .start();
            //.links(data); 

        var findNode = function(id) 
            for (var i in force.nodes()) 
                if (force.nodes()[i]["index"] == id) return force.nodes()[i]
            ;
            return null;
        ;

        var pushLink = function (link) 
            //console.log(link)
            if(findNode(link.source)!= null && findNode(link.target)!= null)         
                force.links().push (
                    "source":findNode(link.source),
            "target":findNode(link.target)
            )
            
        ;

        data.forEach(pushLink);

[...]

但在这种情况下，我得到了一堆：

Error: Invalid value for <circle> attribute cy="NaN"

我不知道这种情况下有什么问题！

【问题讨论】：

您解决了这个问题吗？我面临着类似的情况，很想知道你是如何处理的。

你想构建什么？

【参考方案1】：

我看到的方法是使用 queue.js 对函数进行排队，如 Elijah Meeks 的“D3.js in Action”一书中所述。第 6 章的示例代码在 Manning 网站上，参见清单 6.7。 （买这本书，挺好的）这里的基本结构稍微适应了你的用例：

   <script src="https://cdnjs.cloudflare.com/ajax/libs/queue-async/1.0.7/queue.min.js"></script>
   queue()
   .defer(d3.csv, "csvVertices.csv")
   .defer(d3.csv, "csvEdges.csv")
   .await(function(error, file1, file2) createForceLayout(file1, file2););
   function createForceLayout(nodes, edges) 
     var nodeHash = ;
     for (x in nodes) 
       nodeHash[nodes[x].id] = nodes[x];
     
     for (x in edges) 
       edges[x].weight = 1; //you have no weight
       edges[x].source = nodeHash[edges[x].source];
       edges[x].target = nodeHash[edges[x].target];
     
     force = d3.layout.force()
       .charge(-1000)
       .gravity(.3)
       .linkDistance(50)
       .size([500,500])
       .nodes(nodes)
       .links(edges);  
       //etc.