Question

解决这个问题 http://flowingdata.com/2012/08/02/how-to-make-an-interactive-network-visualization/

在这行代码中：

var node = nodesG.selectAll("circle.node").data(nodes, function (d) {
        console.log("hello");
        return d.id;
    });

console.log永远不会运行。我不确定为什么。

这是nodesG：

var vis = d3.select(selection).append("svg")
        .attr("width", width)
        .attr("height", height);
nodesG = vis.append("g").attr("id", "nodes");

Answer 1

有两件事情浮现在脑海中。父项不存在，或者数据为空。要么就是这个，要么永远不会到达这部分代码。

试试这个：

var data = [1,2,3,4,5]

var body = d3.select("body")
var nothing = d3.select("#wut")

//shouldn't be called
var noparent = nothing.selectAll("div").data(data, function(d){
    alert("no parent CALLED"); return d;
})

var nodata = body.selectAll("div").data([], function(d){
    alert("no data CALLED"); 
    return d;
})

var wrongdata = body.selectAll("div").data({banana:2, apple:3}, function(d){
    alert("wrong data CALLED"); 
    return d;
})

//should be called
var noenter = body.selectAll("div").data(data, function(d){
    alert("no enter CALLED"); 
    return d;
})

var nodes = body.selectAll("div").data(data, function(d){
    alert("normal CALLED"); 
    return d;
}).enter().append("div")
  .text(function(d){ return d})

编辑：我添加了测试，显示非数组不会导致连接。

D3.js .selectAll无法正常工作

1 个答案: