D3强制定向未捕获类型错误

时间：2017-03-31 23:35:07

标签： javascript d3.js

我正在尝试根据代码here生成D3力直接图。我生成了以下脚本：

<script src='http://d3js.org/d3.v3.min.js'></script>
    <script>
    var width = 640, height = 480;

var nodes = [{"name": "xxx"},{"name": "xxx"},{"name": "xxx"},{"name": "xxx"},{"name": "xxx"},{"name": "xxx"},{"name": "xxx"},{"name": "xxx"},{"name": "xxx"},{"name": "xxx"},{"name": "xxx"},{"name": "xxx"},{"name": "xxx"},{"name": "xxx"},{"name": "xxx"},{"name": "xxx"},{"name": "xxx"},{"name": "xxx"},{"name": "xxx"},{"name": "xxx"},{"name": "xxx"},{"name": "xxx"},{"name": "xxx"},{"name": "xxx"},{"name": "xxx"},{"name": "xxx"},{"name": "xxx"},{"name": "xxx"},{"name": "xxxn"},{"name": "xxx"},{"name": "xxx"},{"name": "xxx"},{"name": "xxx"},{"name": "xxx"},{"name": "xxx"},{"name": "xxx"},{"name": "xxx"}];
var links = [{"source": "0", "target": "1", "value": 1},{"source": "2", "target": "1", "value": 1},{"source": "3", "target": "1", "value": 1},{"source": "4", "target": "1", "value": 1},{"source": "5", "target": "1", "value": 1},{"source": "6", "target": "1", "value": 1},{"source": "7", "target": "1", "value": 1},{"source": "8", "target": "1", "value": 1},{"source": "9", "target": "1", "value": 1},{"source": "10", "target": "1", "value": 1},{"source": "11", "target": "1", "value": 1},{"source": "12", "target": "1", "value": 1},{"source": "13", "target": "1", "value": 1},{"source": "14", "target": "1", "value": 1},{"source": "1", "target": "15", "value": 1},{"source": "1", "target": "16", "value": 1},{"source": "1", "target": "17", "value": 1},{"source": "1", "target": "18", "value": 1},{"source": "1", "target": "19", "value": 1},{"source": "1", "target": "20", "value": 1},{"source": "1", "target": "21", "value": 1},{"source": "1", "target": "22", "value": 1},{"source": "1", "target": "23", "value": 1},{"source": "1", "target": "24", "value": 1},{"source": "1", "target": "25", "value": 1},{"source": "1", "target": "26", "value": 1},{"source": "1", "target": "27", "value": 1},{"source": "1", "target": "28", "value": 1},{"source": "1", "target": "29", "value": 1},{"source": "1", "target": "30", "value": 1},{"source": "1", "target": "31", "value": 1},{"source": "1", "target": "32", "value": 1},{"source": "1", "target": "33", "value": 1},{"source": "1", "target": "34", "value": 1},{"source": "1", "target": "35", "value": 1},{"source": "1", "target": "36", "value": 1}];
    var svg = d3.select('body').append('svg')
        .attr('width', width)
        .attr('height', height);

    var force = d3.layout.force()
        .size([width, height])
        .nodes(nodes)
        .links(links);

    force.linkDistance(width/2);

    var link = svg.selectAll('.link')
        .data(links)
        .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/25)
            .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>

（xxxs是实际名称）。它正在抛出“未捕获的TypeError：无法读取未定义的属性'推送”。我在另一个线程中读到，如果节点编号不正确，可能会导致这种情况，但我将节点从零编号，据我所知，节点中不存在节点中没有节点。谁能告诉我什么是错的？

1 个答案:

答案 0 :(得分：1)

查看[{"source": "0", "target": "1", "value": 1},... //this is a string ---------^ 数组中的对象：

links.forEach(function(d) {
    d.source = +d.source;
    d.target = +d.target;
})

这里没有数字，只有字符串。要使力量起作用，您必须设置源和目标的数字。

一个简单的解决方案是强迫：

var nodes = [{
  "name": "xxx"
}, {
  "name": "xxx"
}, {
  "name": "xxx"
}, {
  "name": "xxx"
}, {
  "name": "xxx"
}, {
  "name": "xxx"
}, {
  "name": "xxx"
}, {
  "name": "xxx"
}, {
  "name": "xxx"
}, {
  "name": "xxx"
}, {
  "name": "xxx"
}, {
  "name": "xxx"
}, {
  "name": "xxx"
}, {
  "name": "xxx"
}, {
  "name": "xxx"
}, {
  "name": "xxx"
}, {
  "name": "xxx"
}, {
  "name": "xxx"
}, {
  "name": "xxx"
}, {
  "name": "xxx"
}, {
  "name": "xxx"
}, {
  "name": "xxx"
}, {
  "name": "xxx"
}, {
  "name": "xxx"
}, {
  "name": "xxx"
}, {
  "name": "xxx"
}, {
  "name": "xxx"
}, {
  "name": "xxx"
}, {
  "name": "xxxn"
}, {
  "name": "xxx"
}, {
  "name": "xxx"
}, {
  "name": "xxx"
}, {
  "name": "xxx"
}, {
  "name": "xxx"
}, {
  "name": "xxx"
}, {
  "name": "xxx"
}, {
  "name": "xxx"
}];
var links = [{
  "source": "0",
  "target": "1",
  "value": 1
}, {
  "source": "2",
  "target": "1",
  "value": 1
}, {
  "source": "3",
  "target": "1",
  "value": 1
}, {
  "source": "4",
  "target": "1",
  "value": 1
}, {
  "source": "5",
  "target": "1",
  "value": 1
}, {
  "source": "6",
  "target": "1",
  "value": 1
}, {
  "source": "7",
  "target": "1",
  "value": 1
}, {
  "source": "8",
  "target": "1",
  "value": 1
}, {
  "source": "9",
  "target": "1",
  "value": 1
}, {
  "source": "10",
  "target": "1",
  "value": 1
}, {
  "source": "11",
  "target": "1",
  "value": 1
}, {
  "source": "12",
  "target": "1",
  "value": 1
}, {
  "source": "13",
  "target": "1",
  "value": 1
}, {
  "source": "14",
  "target": "1",
  "value": 1
}, {
  "source": "1",
  "target": "15",
  "value": 1
}, {
  "source": "1",
  "target": "16",
  "value": 1
}, {
  "source": "1",
  "target": "17",
  "value": 1
}, {
  "source": "1",
  "target": "18",
  "value": 1
}, {
  "source": "1",
  "target": "19",
  "value": 1
}, {
  "source": "1",
  "target": "20",
  "value": 1
}, {
  "source": "1",
  "target": "21",
  "value": 1
}, {
  "source": "1",
  "target": "22",
  "value": 1
}, {
  "source": "1",
  "target": "23",
  "value": 1
}, {
  "source": "1",
  "target": "24",
  "value": 1
}, {
  "source": "1",
  "target": "25",
  "value": 1
}, {
  "source": "1",
  "target": "26",
  "value": 1
}, {
  "source": "1",
  "target": "27",
  "value": 1
}, {
  "source": "1",
  "target": "28",
  "value": 1
}, {
  "source": "1",
  "target": "29",
  "value": 1
}, {
  "source": "1",
  "target": "30",
  "value": 1
}, {
  "source": "1",
  "target": "31",
  "value": 1
}, {
  "source": "1",
  "target": "32",
  "value": 1
}, {
  "source": "1",
  "target": "33",
  "value": 1
}, {
  "source": "1",
  "target": "34",
  "value": 1
}, {
  "source": "1",
  "target": "35",
  "value": 1
}, {
  "source": "1",
  "target": "36",
  "value": 1
}];
links.forEach(function(d) {
  d.source = +d.source;
  d.target = +d.target;
})
var width = 400,
  height = 400;
var svg = d3.select('body').append('svg')
  .attr('width', width)
  .attr('height', height);

var force = d3.layout.force()
  .size([width, height])
  .nodes(nodes)
  .links(links);

force.linkDistance(width / 2);

var link = svg.selectAll('.link')
  .data(links)
  .enter().append('line')
  .attr('class', 'link');

var node = svg.selectAll('.node')
  .data(nodes)
  .enter().append('circle')
  .attr('class', 'node');
  
force.on("start", function(){
  svg.append("text")
    .attr("class", "text")
    .attr("x", 150)
    .attr("y", 80)
    .text("Calculating...");
});

force.on('end', function() {
  svg.select(".text").remove();
  node.attr('r', width / 25)
    .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 src='https://d3js.org/d3.v3.min.js'></script>
.on("end"

编辑：由于您使用THREE.Pass.prototype绘制节点，因此您必须等到力完成。

相关问题
最新问题