d3：具有两个 CSV 的力导向图答案

【问题标题】：d3: force-directed graph with two CSVsd3：具有两个 CSV 的力导向图
【发布时间】：2016-01-25 20:19:17
【问题描述】：

我是 d3 的新手，我遇到了一个神秘的错误，导致无法将任何内容附加到 SVG 元素。

我正在尝试根据我自己的数据创建一个力导向图，该数据目前位于两个 CSV 中。我的大部分代码都是从this 示例中复制的。

索引.html

<!DOCTYPE html>
<meta charset="utf-8">

<html>
<head>
<style>

.node {
  stroke: #fff;
  stroke-width: 1.5px;
}

.link {
  stroke: #999;
  stroke-opacity: .6;
}

</style>
<script type="text/javascript" src="d3.min.js"></script>
</head>
<body>
<script>
var width = 500;
var height = 500;

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

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

d3.csv("nodes.csv", function(node_error,node_data) {
 d3.csv("links.csv", function(link_error,link_data) {
   if (node_error) throw node_error;
   if (link_error) throw link_error;

        force
            .nodes(node_data)
            .links(link_data)
            .start();

        var link = svg.selectAll(".link")
            .data(link_data)
          .enter().append("line")
            .attr("class", "link")
            .style("stroke-width", 2);

        var node = svg.selectAll(".node")
            .data(node_data)
          .enter().append("circle")
            .attr("class", "node")
            .attr("r", 5)
            .style("fill", "black")
            .call(force.drag);

        node.append("title")
            .text(function(d) { return d.function_name; });

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

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

nodes.csv

function_name,weight
calc_mandelbrot_vals,0
escapeval_to_color,0
get_mb_corename,0
extract_mb_filename,0
write_mb,0
read_mb,0
get_mb_path,0
write_array_file,0
read_array_file,0
get_mandelbrot,0
mb_to_png,0
mb_to_tkinter,0
main,0
println,0
randint,0
Image,0
ImageDraw,0
main_shuttle,0

链接.csv

source,target,value
write_mb,write_array_file,1
write_mb,get_mb_path,1
write_mb,calc_mandelbrot_vals,1
read_mb,read_array_file,1
read_mb,get_mb_path,1
get_mb_path,get_mb_corename,1
get_mandelbrot,write_mb,1
get_mandelbrot,calc_mandelbrot_vals,1
get_mandelbrot,read_mb,1
get_mandelbrot,get_mb_path,1
mb_to_png,get_mandelbrot,1
mb_to_png,get_mb_corename,1
mb_to_png,escapeval_to_color,1
mb_to_png,println,1
mb_to_tkinter,get_mandelbrot,1
mb_to_tkinter,escapeval_to_color,1
mb_to_tkinter,println,1
main,mb_to_png,1
main,println,2
main,mb_to_tkinter,1
main_shuttle,main,1

这是我遇到的错误，我在谷歌上没有找到任何东西......

TypeError: e[i.source.index] 未定义

我想知道是否可以使用两个 CSV，因为 force layout 文档中的这个令人不安的句子：

与其他一些无状态的布局实现不同，强制布局在内部保持对关联节点和链接的引用；因此，给定的力布局实例只能用于单个数据集。

但也许数据正在有效地合并到一个数据集中...如果这是问题所在，我是否需要将我的数据转换为 JSON？

感谢您阅读这么长的问题！

【问题讨论】：

标签： d3.js force-layout

【解决方案1】：

您需要在加载前对这两个文件进行排队。在版本 3 中可能涉及一个单独的 js 文件 queue.js。在版本中你可以使用d3.queue:

d3.queue()
.defer(d3.csv, "nodelist.csv")
.defer(d3.csv, "edgelist.csv")
.await(function (error, file1, file2) {
createForceLayout(file1, file2);
});

【讨论】：