Question

我是编码新手，最近开始使用d3生成力导向图。在使用链接派生节点时，我成功生成了一个四节点图。但是，当我明确列出节点时，我收到错误“Uncaught TypeError：无法读取未定义的属性'push'（d3.v3.min.js）”。我已经研究了对以下两个类似问题的回答，但是无法使用答案解决这个问题。我试图删除尽可能多的不相关的功能，谢谢。

JavaScript error "Uncaught TypeError: Cannot call method 'push' of undefined" D3.js

Uncaught TypeError: Cannot call method 'push' of undefined (d3 force layout)

强制定向图失败：

$sql="select * from library l
    left outer join users u on u.uid=l.uid
    left outer join books b on b.bid=l.bid
    left outer join publishers p on p.pid=b.pid
    where u.username='joe bloggs';";

强制定向图工作：

<script type="text/javascript" src="d3.v3.min.js"> </script>

<script>

var width = 900,
    height = 590;

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

var links = [
    {source: 'H', target: 'I'},
    {source: 'H', target: 'J'},
    {source: 'I', target: 'J'},
    {source: 'J', target: 'K'},
];

var nodes = [ 
    {name: 'H'},
    {name: 'I'},
    {name: 'J'},
    {name: 'K'},
];

var force = d3.layout.force()
    .size([width, height])
    .nodes(d3.values(nodes))
    .links(links)
    .on('tick', tick)
    .linkDistance(100)
    .gravity(.15)
    .friction(.8)
    .linkStrength(1)
    .charge(-425)
    .chargeDistance(600)
    .start();

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

var node = svg.selectAll('.node')
    .data(force.nodes())
    .enter().append('circle')
    .attr('class', 'node')
    .attr('r', width * 0.01)

function tick(e) {

    node.attr('cx', function(d) { return d.x; })
        .attr('cy', function(d) { return d.y; })
        .call(force.drag);

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

};

    </script>

Answer 1

API文档有：

注意：源和目标属性的值最初可以指定为 nodes 数组的索引;在调用start之后，这些将被引用替换。

链接数组需要通过索引或引用节点来引用节点。对象。在您的工作示例中，这是在从链接创建节点时完成的：

link.source =                                   // (3)
    nodes[link.source] ||                       // (1)
    (nodes[link.source] = {name: link.source}); // (2)

这将（1）使用link.source中节点的文字名称，比如H，并从nodes数组中获取节点对象（如果已存在）。如果在nodes数组中找不到它，则会评估||运算符的右侧，它将（2）创建一个新节点对象并将其放入数组中。在任何一种情况下，整个表达式（1）||（2）将评估节点对象的引用，然后（3）将其分配给link.source。因此，您不仅要从链接创建节点，还要改变链接本身。在初始化之后，您的链接数组将如下所示：

[
  {source: { name: 'H' }, target: { name: 'I' }},
  {source: { name: 'H' }, target: { name: 'J' }},
  {source: { name: 'I' }, target: { name: 'J' }},
  {source: { name: 'J' }, target: { name: 'K' }},
];

现在，您已准备好所有链接对象的链接数组＆＃39; source和target属性，包含对节点对象的引用。

如果您已经拥有节点＆＃39;对象就绪，你可以通过放入引用来自己初始化链接数组，或者你可以通过索引引用节点将它留给D3：

var links = [
    {source: 0, target: 1},
    {source: 0, target: 2},
    {source: 1, target: 2},
    {source: 2, target: 3},
];

var nodes = [ 
    {name: 'H'},
    {name: 'I'},
    {name: 'J'},
    {name: 'K'},
];

将其放入您的非工作示例中将使其按预期工作：

＆＃13;

var width = 600,
    height = 400;

var svg = d3.select("body")
        .append("svg")
        .attr("width", width)
        .attr("height", height)

var links = [
    {source: 0, target: 1},
    {source: 0, target: 2},
    {source: 1, target: 2},
    {source: 2, target: 3},
];

var nodes = [ 
    {name: 'H'},
    {name: 'I'},
    {name: 'J'},
    {name: 'K'},
];

var force = d3.layout.force()
    .size([width, height])
    .nodes(d3.values(nodes))
    .links(links)
    .on('tick', tick)
    .linkDistance(100)
    .gravity(.15)
    .friction(.8)
    .linkStrength(1)
    .charge(-425)
    .chargeDistance(600)
    .start();

var link = svg.selectAll('.link')
    .data(links)
    .enter().append('line')
    .attr('class', 'link');

var node = svg.selectAll('.node')
    .data(force.nodes())
    .enter().append('circle')
    .attr('class', 'node')
    .attr('r', width * 0.01)

function tick(e) {

    node.attr('cx', function(d) { return d.x; })
        .attr('cy', function(d) { return d.y; })
        .call(force.drag);

    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; });

};

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

＆＃13;

Answer 2

在我的情况下，当我给出节点索引的链接的源或目标值是一个字符串时，我遇到了这个问题。

强制定向图错误，“无法读取未定义的属性'推送'

2 个答案: