Javascript &引用；TypeError:邻居[o.source.index]未定义；在D3数据可视化中替换示例数据时_Javascript_D3.js_Data Visualization_Typeerror

Javascript &引用；TypeError:邻居[o.source.index]未定义；在D3数据可视化中替换示例数据时

javascript d3.js

Javascript &引用；TypeError:邻居[o.source.index]未定义；在D3数据可视化中替换示例数据时,javascript,d3.js,data-visualization,typeerror,Javascript,D3.js,Data Visualization,Typeerror,我正在学习D3的教程。该示例附带随机生成的节点和随机链接。我试图用我的数据替换这些随机元素。下面是代码，我注释掉了原始部分，以根据原始代码中给出的信息添加我自己的数据，即注释掉的部分 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="en"> <head> <meta charset="utf-8"> <script type=

我正在学习D3的教程。该示例附带随机生成的节点和随机链接。我试图用我的数据替换这些随机元素。下面是代码，我注释掉了原始部分，以根据原始代码中给出的信息添加我自己的数据，即注释掉的部分

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
    <head>
        <meta charset="utf-8">
        <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?2.6.0"></script>
        <script type="text/javascript" src="http://mbostock.github.com/d3/d3.layout.js?2.6.0"></script>
        <script type="text/javascript" src="http://mbostock.github.com/d3/d3.geom.js?2.6.0"></script>
    </head>
    <body>
<script type="text/javascript" charset="utf-8">
            var w = 960, h = 500;

            var labelDistance = 0;

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

            var nodes = [];
            var labelAnchors = [];
            var labelAnchorLinks = [];
            var links = [];

            // for(var i = 0; i < 30; i++) {
            //  var node = {
            //      label : "node " + i
            //  };
            //  nodes.push(node);
            //  labelAnchors.push({
            //      node : node
            //  });
            //  labelAnchors.push({
            //      node : node
            //  });
            // };

            // for(var i = 0; i < nodes.length; i++) {
            //  for(var j = 0; j < i; j++) {
            //      if(Math.random() > .95)
            //          links.push({
            //              source : i,
            //              target : j,
            //              weight : Math.random()
            //          });
            //  }
            //  labelAnchorLinks.push({
            //      source : i * 2,
            //      target : i * 2 + 1,
            //      weight : 1
            //  });
            // };


            // my own code to insert data starts here. 
            nodes = [
                        {label : "A"},
                        {label : "B"},
                        {label : "C"}
                    ];

            labelAnchors = [
                        {node : "A"},
                        {node : "B"},
                        {node : "C"}
            ];

            links = [
                        {source : "A", target : "B", weight: 10},
                        {source : "B", target : "C", weight: 1},
                        {source : "C", target : "A", weight: 5}
            ];

            labelAnchorLinks = [
                        {source : "A", target : "B", weight: 10},
                        {source : "B", target : "C", weight: 1},
                        {source : "C", target : "A", weight:5}
            ];
            // my own code to insert data ends here. 

            var force = d3.layout.force().size([w, h]).nodes(nodes).links(links).gravity(1).linkDistance(50).charge(-3000).linkStrength(function(x) {
                return x.weight * 10
            });


            force.start();

            var force2 = d3.layout.force().nodes(labelAnchors).links(labelAnchorLinks).gravity(0).linkDistance(0).linkStrength(8).charge(-100).size([w, h]);
            force2.start();

            var link = vis.selectAll("line.link").data(links).enter().append("svg:line").attr("class", "link").style("stroke", "#CCC");

            var node = vis.selectAll("g.node").data(force.nodes()).enter().append("svg:g").attr("class", "node");
            node.append("svg:circle").attr("r", 5).style("fill", "#555").style("stroke", "#FFF").style("stroke-width", 3);
            node.call(force.drag);

            // bind data to links
            var anchorLink = vis.selectAll("line.anchorLink").data(labelAnchorLinks)//.enter().append("svg:line").attr("class", "anchorLink").style("stroke", "#999");

            // bind data and text to circles
            var anchorNode = vis.selectAll("g.anchorNode").data(force2.nodes()).enter().append("svg:g").attr("class", "anchorNode");
            anchorNode.append("svg:circle").attr("r", 0).style("fill", "#FFF");
            anchorNode.append("svg:text").text(function(d, i) {
                return i % 2 == 0 ? "" : d.node.label
            }).style("fill", "#555").style("font-family", "Arial").style("font-size", 12);

            var updateLink = function() {
                this.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;
                });

            }

            var updateNode = function() {
                this.attr("transform", function(d) {
                    return "translate(" + d.x + "," + d.y + ")";
                });

            }

            force.on("tick", function() {

                force2.start();

                node.call(updateNode);

                anchorNode.each(function(d, i) {
                    if(i % 2 == 0) {
                        d.x = d.node.x;
                        d.y = d.node.y;
                    } else {
                        var b = this.childNodes[1].getBBox();

                        var diffX = d.x - d.node.x;
                        var diffY = d.y - d.node.y;

                        var dist = Math.sqrt(diffX * diffX + diffY * diffY);

                        var shiftX = b.width * (diffX - dist) / (dist * 2);
                        shiftX = Math.max(-b.width, Math.min(0, shiftX));
                        var shiftY = 5;
                        this.childNodes[1].setAttribute("transform", "translate(" + shiftX + "," + shiftY + ")");
                    }
                });


                anchorNode.call(updateNode);

                link.call(updateLink);
                anchorLink.call(updateLink);

            });

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


var w=960，h=500；
var labelDistance=0；
var vis=d3.select（“body”）.append（“svg:svg”）.attr（“width”，w）、attr（“height”，h）；
var节点=[]；
变量labelAnchors=[]；
变量labelAnchorLinks=[]；
var-links=[]；
//对于（变量i=0；i<30；i++）{
//变量节点={
//标签：“节点”+i
//  };
//nodes.push（节点）；
//唇齿弓({
//节点：节点
//  });
//唇齿弓({
//节点：节点
//  });
// };
//对于（var i=0；i.95）
//links.push({
//资料来源：我，
//目标：j，
//权重：Math.random（）
//          });
//  }
//拉伯兰({
//资料来源：i*2，
//目标：i*2+1，
//体重：1
//  });
// };
//我自己插入数据的代码从这里开始。
节点=[
{标签：“A”}，
{标签：“B”}，
{标签：“C”}
];
唇形线=[
{node:“A”}，
{node:“B”}，
{node:“C”}
];
链接=[
{来源：“A”，目标：“B”，重量：10}，
{来源：“B”，目标：“C”，权重：1}，
{来源：“C”，目标：“A”，重量：5}
];
labelAnchorLinks=[
{来源：“A”，目标：“B”，重量：10}，
{来源：“B”，目标：“C”，权重：1}，
{来源：“C”，目标：“A”，重量：5}
];
//我自己插入数据的代码到此结束。
var force=d3.layout.force（）.size（[w，h]）。节点（nodes）。链接（links）。重力（1）。链接距离（50）。电荷（-3000）。链接强度（函数（x）{
返回x.weight*10
});
force.start（）；
var force2=d3.layout.force（）.节点（labelAnchors）.链接（labelAnchors）.重力（0）.链接距离（0）.链接强度（8）.电荷（-100）.大小（[w，h]）；
force2.start（）；
var link=vis.selectAll（“line.link”）.data（links）.enter（）.append（“svg:line”）.attr（“class”，“link”）.style（“stroke”，“#CCC”）；
var node=vis.selectAll（“g.node”）.data（force.nodes（））.enter（）.append（“svg:g”）.attr（“类”、“节点”）；
node.append（“svg:circle”）.attr（“r”，5）.style（“fill”，“#555”）.style（“stroke”，“#FFF”）.style（“stroke width”，3）；
node.call（强制拖动）；
//将数据绑定到链接
var anchorLink=vis.selectAll（“line.anchorLink”）.data（labelAnchorLinks）/.enter（）.append（“svg:line”）.attr（“class”、“anchorLink”）.style（“stroke”、“999”）；
//将数据和文本绑定到圆
var anchorNode=vis.selectAll（“g.anchorNode”）.data（force2.nodes（））.enter（）.append（“svg:g”）.attr（“class”，“anchorNode”）；
anchorNode.append（“svg:circle”）.attr（“r”，0）.style（“fill”，“#FFF”）；
anchorNode.append（“svg:text”）.text（函数（d，i）{
返回i%2==0？“：d.node.label
}).style（“fill”，“#555”）.style（“字体系列”，“Arial”）.style（“字体大小”，12）；
var updateLink=函数（）{
这个.attr（“x1”，函数（d）{
返回d.source.x；
}).attr（“y1”，函数（d）{
返回d.source.y；
}).attr（“x2”，函数（d）{
返回d.target.x；
}).attr（“y2”，功能（d）{
返回d.target.y；
});
}
var updateNode=函数（）{
this.attr（“转换”，函数（d）{
返回“translate”（“+d.x+”，“+d.y+”）；
});
}
force.on（“勾号”，函数（）{
force2.start（）；
node.call（updateNode）；
锚定节点。每个（功能（d，i）{
如果（i%2==0）{
d、 x=d.node.x；
d、 y=d.node.y；
}否则{
var b=this.childNodes[1].getBBox（）；
var diffX=d.x-d.node.x；
var diffY=d.y-d.node.y；
var dist=数学sqrt（diffX*diffX+diffY*diffY）；
var shiftX=b.宽度*（diffX-距离）/（距离*2）；
shiftX=数学最大值（-b.宽度，数学最小值（0，shiftX））；
var-shiftY=5；
this.childNodes[1].setAttribute（“transform”、“translate”（+shiftX+）、“+shiftY+”）；
}
});
anchorNode.call（updateNode）；
link.call（updateLink）；
主播链接调用（updateLink）；
});

所以我得到的错误是

类型错误：邻居[o.source.index]未定义

…怎么了

您没有采用示例数据结构，因此，图形中断

让我们来看看助教

for(var i = 0; i < 30; i++) {
  var node = {
    label : "node " + i
  };
  nodes.push(node);
  labelAnchors.push({
    node : node
  });
  labelAnchors.push({
    node : node
  });
};

labelAnchors = [
  {node : "A"},
  {node : "B"},
  {node : "C"}
 ];

var labelAnchors = [];
nodes.forEach(function(n) {
   labelAnchors.push({node:n},{node:n});
})

for(var i = 0; i < nodes.length; i++) {
  for(var j = 0; j < i; j++) {
    if(Math.random() > .95)
      links.push({
        source : i,
        target : j,
        weight : Math.random()
      });
    }
    labelAnchorLinks.push({
      source : i * 2,
      target : i * 2 + 1,
      weight : 1
     });
    };

links = [
  {source : 0, target : 1, weight: Math.random()},
  {source : 1, target : 2, weight: Math.random()},
  {source : 2, target : 0, weight: Math.random()}
];

labelAnchorLinks = [
  {source : 0*2, target : 0*2+1, weight: 1},
  {source : 1*2, target : 1*2+1, weight: 1},
  {source : 2*2, target : 2*2+1, weight: 1}
];

var labelAnchorLinks = [];
nodes.forEach(function(d,i) {
  var link = {};
  link.source = i * 2;
  link.target = i * 2 + 1;
  link.weight = 1;
  labelAnchorLinks.push(link);
})