Question

我是d3的新手，我遇到了一个神秘的错误，它不会将任何内容附加到SVG元素上。

我正在尝试根据自己的数据创建一个力导向图，目前这两个数据库中有两个CSV。我的大多数代码都是从this示例复制而来的。

的index.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

links.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，因为强制布局文档中的这个令人不安的句子：

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

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

感谢您阅读这个长期的问题！

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

d3：带有两个CSV的强制导向图

1 个答案: