Question

我不知道我的D3图表不起作用。我已经尝试了两天没有结果。它引发TypeError: Cannot read property 'push' of undefined错误。这是完整的代码

<!DOCTYPE html>
<meta charset="utf-8">
<body> 
 <style>
.link {
stroke: #666;
opacity: 0.9;
stroke-width: 1.5px;
}
.node circle {
stroke: #fff;
opacity: 0.9;
stroke-width: 1.5px;
}
.node:not(:hover) .nodetext {
display: none;
}
text {
font: 7px serif;
opacity: 0.9;
pointer-events: none;
}
</style>

<script src=http://d3js.org/d3.v3.min.js></script>

<script> 
 var links = [ { "source" : "A", "target" : "B", "value" : "1" }, { "source" : "A", "target" : "C", "value" : "2" }, { "source" : "A", "target" : "D", "value" : "3" }, { "source" : "A", "target" : "J", "value" : "4" }, { "source" : "B", "target" : "E", "value" : "5" }, { "source" : "B", "target" : "F", "value" : "6" }, { "source" : "C", "target" : "G", "value" : "7" }, { "source" : "C", "target" : "H", "value" : "8" }, { "source" : "D", "target" : "I", "value" : "9" } ] ; 
 var nodes = [ { "name" : "Myriel", "group" : "1" }, { "name" : "Napoleon", "group" : "1" }, { "name" : "Mlle.Baptistine", "group" : "1" }, { "name" : "Mme.Magloire", "group" : "1" }, { "name" : "CountessdeLo", "group" : "1" }, { "name" : "Geborand", "group" : "1" }, { "name" : "Geborand", "group" : "1" }, { "name" : "Geborand", "group" : "1" }, { "name" : "Geborand", "group" : "1" } ] ; 
 var width = 550
height = 400;

var color = d3.scale.category20();

var force = d3.layout.force()
.nodes(d3.values(nodes))
.links(links)
.size([width, height])
.linkDistance(50)
.charge(-120)
.on("tick", tick)
.start();

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

var link = svg.selectAll(".link")
.data(force.links())
.enter().append("line")
.attr("class", "link")
.style("stroke-width", function(d) { return Math.sqrt(d.value); });

var node = svg.selectAll(".node")
.data(force.nodes())
.enter().append("g")
.attr("class", "node")
.style("fill", function(d) { return color(d.group); })
.style("opacity", 0.9)
.on("mouseover", mouseover)
.on("mouseout", mouseout)
.call(force.drag);

node.append("circle")
.attr("r", 6)

node.append("svg:text")
.attr("class", "nodetext")
.attr("dx", 12)
.attr("dy", ".35em")
.text(function(d) { return d.name });

function tick() {
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("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
}

function mouseover() {
d3.select(this).select("circle").transition()
.duration(750)
.attr("r", 16);
d3.select(this).select("text").transition()
.duration(750)
.attr("x", 13)
.style("stroke-width", ".5px")
.style("font", "17.5px serif")
.style("opacity", 1);
}

function mouseout() {
d3.select(this).select("circle").transition()
.duration(750)
.attr("r", 8);
}

</script>
 </body>

上面的文件有什么问题？

例如，我有一个类似的测试文件，工作正常。这是

<!DOCTYPE html>
<meta charset="utf-8">
<body> 
 <style>
.link {
stroke: #666;
opacity: 0.9;
stroke-width: 1.5px;
}
.node circle {
stroke: #fff;
opacity: 0.9;
stroke-width: 1.5px;
}
.node:not(:hover) .nodetext {
display: none;
}
text {
font: 7px serif;
opacity: 0.9;
pointer-events: none;
}
</style>

<script src=http://d3js.org/d3.v3.min.js></script>

<script> 
 var links = [ { "source" : 1, "target" : 0, "value" : 1 }, { "source" : 2, "target" : 0, "value" : 8 }, { "source" : 3, "target" : 0, "value" : 10 }, { "source" : 3, "target" : 2, "value" : 6 }, { "source" : 4, "target" : 0, "value" : 1 }, { "source" : 5, "target" : 0, "value" : 1 }, { "source" : 6, "target" : 0, "value" : 1 }, { "source" : 7, "target" : 0, "value" : 1 }, { "source" : 8, "target" : 0, "value" : 2 }, { "source" : 9, "target" : 0, "value" : 1 }, { "source" : 11, "target" : 10, "value" : 1 }, { "source" : 11, "target" : 3, "value" : 3 }, { "source" : 11, "target" : 2, "value" : 3 }, { "source" : 11, "target" : 0, "value" : 5 }, { "source" : 12, "target" : 11, "value" : 1 }, { "source" : 13, "target" : 11, "value" : 1 }, { "source" : 14, "target" : 11, "value" : 1 }, { "source" : 15, "target" : 11, "value" : 1 }, { "source" : 17, "target" : 16, "value" : 4 }, { "source" : 18, "target" : 16, "value" : 4 }, { "source" : 18, "target" : 17, "value" : 4 }, { "source" : 19, "target" : 16, "value" : 4 }, { "source" : 19, "target" : 17, "value" : 4 }, { "source" : 19, "target" : 18, "value" : 4 }, { "source" : 20, "target" : 16, "value" : 3 }, { "source" : 20, "target" : 17, "value" : 3 }, { "source" : 20, "target" : 18, "value" : 3 }, { "source" : 20, "target" : 19, "value" : 4 }, { "source" : 21, "target" : 16, "value" : 3 }, { "source" : 21, "target" : 17, "value" : 3 }, { "source" : 21, "target" : 18, "value" : 3 }, { "source" : 21, "target" : 19, "value" : 3 }, { "source" : 21, "target" : 20, "value" : 5 }, { "source" : 22, "target" : 16, "value" : 3 }, { "source" : 22, "target" : 17, "value" : 3 }, { "source" : 22, "target" : 18, "value" : 3 }, { "source" : 22, "target" : 19, "value" : 3 }, { "source" : 22, "target" : 20, "value" : 4 }, { "source" : 22, "target" : 21, "value" : 4 }, { "source" : 23, "target" : 16, "value" : 3 }, { "source" : 23, "target" : 17, "value" : 3 }, { "source" : 23, "target" : 18, "value" : 3 }, { "source" : 23, "target" : 19, "value" : 3 }, { "source" : 23, "target" : 20, "value" : 4 }, { "source" : 23, "target" : 21, "value" : 4 }, { "source" : 23, "target" : 22, "value" : 4 }, { "source" : 23, "target" : 12, "value" : 2 }, { "source" : 23, "target" : 11, "value" : 9 }, { "source" : 24, "target" : 23, "value" : 2 }, { "source" : 24, "target" : 11, "value" : 7 }, { "source" : 25, "target" : 24, "value" : 13 }, { "source" : 25, "target" : 23, "value" : 1 }, { "source" : 25, "target" : 11, "value" : 12 }, { "source" : 26, "target" : 24, "value" : 4 }, { "source" : 26, "target" : 11, "value" : 31 }, { "source" : 26, "target" : 16, "value" : 1 }, { "source" : 26, "target" : 25, "value" : 1 }, { "source" : 27, "target" : 11, "value" : 17 }, { "source" : 27, "target" : 23, "value" : 5 }, { "source" : 27, "target" : 25, "value" : 5 }, { "source" : 27, "target" : 24, "value" : 1 }, { "source" : 27, "target" : 26, "value" : 1 }, { "source" : 28, "target" : 11, "value" : 8 }, { "source" : 28, "target" : 27, "value" : 1 }, { "source" : 29, "target" : 23, "value" : 1 }, { "source" : 29, "target" : 27, "value" : 1 }, { "source" : 29, "target" : 11, "value" : 2 }, { "source" : 30, "target" : 23, "value" : 1 }, { "source" : 31, "target" : 30, "value" : 2 }, { "source" : 31, "target" : 11, "value" : 3 }, { "source" : 31, "target" : 23, "value" : 2 }, { "source" : 31, "target" : 27, "value" : 1 }, { "source" : 32, "target" : 11, "value" : 1 }, { "source" : 33, "target" : 11, "value" : 2 }, { "source" : 33, "target" : 27, "value" : 1 }, { "source" : 34, "target" : 11, "value" : 3 }, { "source" : 34, "target" : 29, "value" : 2 }, { "source" : 35, "target" : 11, "value" : 3 }, { "source" : 35, "target" : 34, "value" : 3 }, { "source" : 35, "target" : 29, "value" : 2 }, { "source" : 36, "target" : 34, "value" : 2 }, { "source" : 36, "target" : 35, "value" : 2 }, { "source" : 36, "target" : 11, "value" : 2 }, { "source" : 36, "target" : 29, "value" : 1 }, { "source" : 37, "target" : 34, "value" : 2 }, { "source" : 37, "target" : 35, "value" : 2 }, { "source" : 37, "target" : 36, "value" : 2 }, { "source" : 37, "target" : 11, "value" : 2 }, { "source" : 37, "target" : 29, "value" : 1 }, { "source" : 38, "target" : 34, "value" : 2 }, { "source" : 38, "target" : 35, "value" : 2 }, { "source" : 38, "target" : 36, "value" : 2 }, { "source" : 38, "target" : 37, "value" : 2 }, { "source" : 38, "target" : 11, "value" : 2 }, { "source" : 38, "target" : 29, "value" : 1 }, { "source" : 39, "target" : 25, "value" : 1 }, { "source" : 40, "target" : 25, "value" : 1 }, { "source" : 41, "target" : 24, "value" : 2 }, { "source" : 41, "target" : 25, "value" : 3 }, { "source" : 42, "target" : 41, "value" : 2 }, { "source" : 42, "target" : 25, "value" : 2 }, { "source" : 42, "target" : 24, "value" : 1 }, { "source" : 43, "target" : 11, "value" : 3 }, { "source" : 43, "target" : 26, "value" : 1 }, { "source" : 43, "target" : 27, "value" : 1 }, { "source" : 44, "target" : 28, "value" : 3 }, { "source" : 44, "target" : 11, "value" : 1 }, { "source" : 45, "target" : 28, "value" : 2 }, { "source" : 47, "target" : 46, "value" : 1 }, { "source" : 48, "target" : 47, "value" : 2 }, { "source" : 48, "target" : 25, "value" : 1 }, { "source" : 48, "target" : 27, "value" : 1 }, { "source" : 48, "target" : 11, "value" : 1 }, { "source" : 49, "target" : 26, "value" : 3 }, { "source" : 49, "target" : 11, "value" : 2 }, { "source" : 50, "target" : 49, "value" : 1 }, { "source" : 50, "target" : 24, "value" : 1 }, { "source" : 51, "target" : 49, "value" : 9 }, { "source" : 51, "target" : 26, "value" : 2 }, { "source" : 51, "target" : 11, "value" : 2 }, { "source" : 52, "target" : 51, "value" : 1 }, { "source" : 52, "target" : 39, "value" : 1 }, { "source" : 53, "target" : 51, "value" : 1 }, { "source" : 54, "target" : 51, "value" : 2 }, { "source" : 54, "target" : 49, "value" : 1 }, { "source" : 54, "target" : 26, "value" : 1 }, { "source" : 55, "target" : 51, "value" : 6 }, { "source" : 55, "target" : 49, "value" : 12 }, { "source" : 55, "target" : 39, "value" : 1 }, { "source" : 55, "target" : 54, "value" : 1 }, { "source" : 55, "target" : 26, "value" : 21 }, { "source" : 55, "target" : 11, "value" : 19 }, { "source" : 55, "target" : 16, "value" : 1 }, { "source" : 55, "target" : 25, "value" : 2 }, { "source" : 55, "target" : 41, "value" : 5 }, { "source" : 55, "target" : 48, "value" : 4 }, { "source" : 56, "target" : 49, "value" : 1 }, { "source" : 56, "target" : 55, "value" : 1 }, { "source" : 57, "target" : 55, "value" : 1 }, { "source" : 57, "target" : 41, "value" : 1 }, { "source" : 57, "target" : 48, "value" : 1 }, { "source" : 58, "target" : 55, "value" : 7 }, { "source" : 58, "target" : 48, "value" : 7 }, { "source" : 58, "target" : 27, "value" : 6 }, { "source" : 58, "target" : 57, "value" : 1 }, { "source" : 58, "target" : 11, "value" : 4 }, { "source" : 59, "target" : 58, "value" : 15 }, { "source" : 59, "target" : 55, "value" : 5 }, { "source" : 59, "target" : 48, "value" : 6 }, { "source" : 59, "target" : 57, "value" : 2 }, { "source" : 60, "target" : 48, "value" : 1 }, { "source" : 60, "target" : 58, "value" : 4 }, { "source" : 60, "target" : 59, "value" : 2 }, { "source" : 61, "target" : 48, "value" : 2 }, { "source" : 61, "target" : 58, "value" : 6 }, { "source" : 61, "target" : 60, "value" : 2 }, { "source" : 61, "target" : 59, "value" : 5 }, { "source" : 61, "target" : 57, "value" : 1 }, { "source" : 61, "target" : 55, "value" : 1 }, { "source" : 62, "target" : 55, "value" : 9 }, { "source" : 62, "target" : 58, "value" : 17 }, { "source" : 62, "target" : 59, "value" : 13 }, { "source" : 62, "target" : 48, "value" : 7 }, { "source" : 62, "target" : 57, "value" : 2 }, { "source" : 62, "target" : 41, "value" : 1 }, { "source" : 62, "target" : 61, "value" : 6 }, { "source" : 62, "target" : 60, "value" : 3 }, { "source" : 63, "target" : 59, "value" : 5 }, { "source" : 63, "target" : 48, "value" : 5 }, { "source" : 63, "target" : 62, "value" : 6 }, { "source" : 63, "target" : 57, "value" : 2 }, { "source" : 63, "target" : 58, "value" : 4 }, { "source" : 63, "target" : 61, "value" : 3 }, { "source" : 63, "target" : 60, "value" : 2 }, { "source" : 63, "target" : 55, "value" : 1 }, { "source" : 64, "target" : 55, "value" : 5 }, { "source" : 64, "target" : 62, "value" : 12 }, { "source" : 64, "target" : 48, "value" : 5 }, { "source" : 64, "target" : 63, "value" : 4 }, { "source" : 64, "target" : 58, "value" : 10 }, { "source" : 64, "target" : 61, "value" : 6 }, { "source" : 64, "target" : 60, "value" : 2 }, { "source" : 64, "target" : 59, "value" : 9 }, { "source" : 64, "target" : 57, "value" : 1 }, { "source" : 64, "target" : 11, "value" : 1 }, { "source" : 65, "target" : 63, "value" : 5 }, { "source" : 65, "target" : 64, "value" : 7 }, { "source" : 65, "target" : 48, "value" : 3 }, { "source" : 65, "target" : 62, "value" : 5 }, { "source" : 65, "target" : 58, "value" : 5 }, { "source" : 65, "target" : 61, "value" : 5 }, { "source" : 65, "target" : 60, "value" : 2 }, { "source" : 65, "target" : 59, "value" : 5 }, { "source" : 65, "target" : 57, "value" : 1 }, { "source" : 65, "target" : 55, "value" : 2 }, { "source" : 66, "target" : 64, "value" : 3 }, { "source" : 66, "target" : 58, "value" : 3 }, { "source" : 66, "target" : 59, "value" : 1 }, { "source" : 66, "target" : 62, "value" : 2 }, { "source" : 66, "target" : 65, "value" : 2 }, { "source" : 66, "target" : 48, "value" : 1 }, { "source" : 66, "target" : 63, "value" : 1 }, { "source" : 66, "target" : 61, "value" : 1 }, { "source" : 66, "target" : 60, "value" : 1 }, { "source" : 67, "target" : 57, "value" : 3 }, { "source" : 68, "target" : 25, "value" : 5 }, { "source" : 68, "target" : 11, "value" : 1 }, { "source" : 68, "target" : 24, "value" : 1 }, { "source" : 68, "target" : 27, "value" : 1 }, { "source" : 68, "target" : 48, "value" : 1 }, { "source" : 68, "target" : 41, "value" : 1 }, { "source" : 69, "target" : 25, "value" : 6 }, { "source" : 69, "target" : 68, "value" : 6 }, { "source" : 69, "target" : 11, "value" : 1 }, { "source" : 69, "target" : 24, "value" : 1 }, { "source" : 69, "target" : 27, "value" : 2 }, { "source" : 69, "target" : 48, "value" : 1 }, { "source" : 69, "target" : 41, "value" : 1 }, { "source" : 70, "target" : 25, "value" : 4 }, { "source" : 70, "target" : 69, "value" : 4 }, { "source" : 70, "target" : 68, "value" : 4 }, { "source" : 70, "target" : 11, "value" : 1 }, { "source" : 70, "target" : 24, "value" : 1 }, { "source" : 70, "target" : 27, "value" : 1 }, { "source" : 70, "target" : 41, "value" : 1 }, { "source" : 70, "target" : 58, "value" : 1 }, { "source" : 71, "target" : 27, "value" : 1 }, { "source" : 71, "target" : 69, "value" : 2 }, { "source" : 71, "target" : 68, "value" : 2 }, { "source" : 71, "target" : 70, "value" : 2 }, { "source" : 71, "target" : 11, "value" : 1 }, { "source" : 71, "target" : 48, "value" : 1 }, { "source" : 71, "target" : 41, "value" : 1 }, { "source" : 71, "target" : 25, "value" : 1 }, { "source" : 72, "target" : 26, "value" : 2 }, { "source" : 72, "target" : 27, "value" : 1 }, { "source" : 72, "target" : 11, "value" : 1 }, { "source" : 73, "target" : 48, "value" : 2 }, { "source" : 74, "target" : 48, "value" : 2 }, { "source" : 74, "target" : 73, "value" : 3 }, { "source" : 75, "target" : 69, "value" : 3 }, { "source" : 75, "target" : 68, "value" : 3 }, { "source" : 75, "target" : 25, "value" : 3 }, { "source" : 75, "target" : 48, "value" : 1 }, { "source" : 75, "target" : 41, "value" : 1 }, { "source" : 75, "target" : 70, "value" : 1 }, { "source" : 75, "target" : 71, "value" : 1 }, { "source" : 76, "target" : 64, "value" : 1 }, { "source" : 76, "target" : 65, "value" : 1 }, { "source" : 76, "target" : 66, "value" : 1 }, { "source" : 76, "target" : 63, "value" : 1 }, { "source" : 76, "target" : 62, "value" : 1 }, { "source" : 76, "target" : 48, "value" : 1 }, { "source" : 76, "target" : 58, "value" : 1 } ] ; 
 var nodes = [ { "name" : "Myriel", "group" : 1 }, { "name" : "Napoleon", "group" : 1 }, { "name" : "Mlle.Baptistine", "group" : 1 }, { "name" : "Mme.Magloire", "group" : 1 }, { "name" : "CountessdeLo", "group" : 1 }, { "name" : "Geborand", "group" : 1 }, { "name" : "Champtercier", "group" : 1 }, { "name" : "Cravatte", "group" : 1 }, { "name" : "Count", "group" : 1 }, { "name" : "OldMan", "group" : 1 }, { "name" : "Labarre", "group" : 2 }, { "name" : "Valjean", "group" : 2 }, { "name" : "Marguerite", "group" : 3 }, { "name" : "Mme.deR", "group" : 2 }, { "name" : "Isabeau", "group" : 2 }, { "name" : "Gervais", "group" : 2 }, { "name" : "Tholomyes", "group" : 3 }, { "name" : "Listolier", "group" : 3 }, { "name" : "Fameuil", "group" : 3 }, { "name" : "Blacheville", "group" : 3 }, { "name" : "Favourite", "group" : 3 }, { "name" : "Dahlia", "group" : 3 }, { "name" : "Zephine", "group" : 3 }, { "name" : "Fantine", "group" : 3 }, { "name" : "Mme.Thenardier", "group" : 4 }, { "name" : "Thenardier", "group" : 4 }, { "name" : "Cosette", "group" : 5 }, { "name" : "Javert", "group" : 4 }, { "name" : "Fauchelevent", "group" : 0 }, { "name" : "Bamatabois", "group" : 2 }, { "name" : "Perpetue", "group" : 3 }, { "name" : "Simplice", "group" : 2 }, { "name" : "Scaufflaire", "group" : 2 }, { "name" : "Woman1", "group" : 2 }, { "name" : "Judge", "group" : 2 }, { "name" : "Champmathieu", "group" : 2 }, { "name" : "Brevet", "group" : 2 }, { "name" : "Chenildieu", "group" : 2 }, { "name" : "Cochepaille", "group" : 2 }, { "name" : "Pontmercy", "group" : 4 }, { "name" : "Boulatruelle", "group" : 6 }, { "name" : "Eponine", "group" : 4 }, { "name" : "Anzelma", "group" : 4 }, { "name" : "Woman2", "group" : 5 }, { "name" : "MotherInnocent", "group" : 0 }, { "name" : "Gribier", "group" : 0 }, { "name" : "Jondrette", "group" : 7 }, { "name" : "Mme.Burgon", "group" : 7 }, { "name" : "Gavroche", "group" : 8 }, { "name" : "Gillenormand", "group" : 5 }, { "name" : "Magnon", "group" : 5 }, { "name" : "Mlle.Gillenormand", "group" : 5 }, { "name" : "Mme.Pontmercy", "group" : 5 }, { "name" : "Mlle.Vaubois", "group" : 5 }, { "name" : "Lt.Gillenormand", "group" : 5 }, { "name" : "Marius", "group" : 8 }, { "name" : "BaronessT", "group" : 5 }, { "name" : "Mabeuf", "group" : 8 }, { "name" : "Enjolras", "group" : 8 }, { "name" : "Combeferre", "group" : 8 }, { "name" : "Prouvaire", "group" : 8 }, { "name" : "Feuilly", "group" : 8 }, { "name" : "Courfeyrac", "group" : 8 }, { "name" : "Bahorel", "group" : 8 }, { "name" : "Bossuet", "group" : 8 }, { "name" : "Joly", "group" : 8 }, { "name" : "Grantaire", "group" : 8 }, { "name" : "MotherPlutarch", "group" : 9 }, { "name" : "Gueulemer", "group" : 4 }, { "name" : "Babet", "group" : 4 }, { "name" : "Claquesous", "group" : 4 }, { "name" : "Montparnasse", "group" : 4 }, { "name" : "Toussaint", "group" : 5 }, { "name" : "Child1", "group" : 10 }, { "name" : "Child2", "group" : 10 }, { "name" : "Brujon", "group" : 4 }, { "name" : "Mme.Hucheloup", "group" : 8 } ] ; 
 var width = 550
height = 400;

var color = d3.scale.category20();

var force = d3.layout.force()
.nodes(d3.values(nodes))
.links(links)
.size([width, height])
.linkDistance(50)
.charge(-120)
.on("tick", tick)
.start();

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

var link = svg.selectAll(".link")
.data(force.links())
.enter().append("line")
.attr("class", "link")
.style("stroke-width", function(d) { return Math.sqrt(d.value); });

var node = svg.selectAll(".node")
.data(force.nodes())
.enter().append("g")
.attr("class", "node")
.style("fill", function(d) { return color(d.group); })
.style("opacity", 0.9)
.on("mouseover", mouseover)
.on("mouseout", mouseout)
.call(force.drag);

node.append("circle")
.attr("r", 6)

node.append("svg:text")
.attr("class", "nodetext")
.attr("dx", 12)
.attr("dy", ".35em")
.text(function(d) { return d.name });

function tick() {
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("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
}

function mouseover() {
d3.select(this).select("circle").transition()
.duration(750)
.attr("r", 16);
d3.select(this).select("text").transition()
.duration(750)
.attr("x", 13)
.style("stroke-width", ".5px")
.style("font", "17.5px serif")
.style("opacity", 1);
}

function mouseout() {
d3.select(this).select("circle").transition()
.duration(750)
.attr("r", 8);
}

</script>
 </body>

这第二个文件正常。但我在第一个文件中看不到任何语法错误。实际上它们非常相似。为什么第二个不起作用？

Answer 1

foo1()的{{1}}和source值表示target数组中对象的索引。这些可以是字符串值或数字，但如果它们是字符串值，则节点需要具有明确的links属性。

您需要向每个节点添加nodes属性（如果您使用的是D3 4.x），或者将id数组中的源/目标属性更改为与索引对应的数字对于每个节点（对于D3 3.x或4.x）。

例如：

id

或：

links

Answer 2

根据JusMalcolm的答案，source和target参数的值必须是与nodes数组中相关项对应的数字索引。在d3 v3中，您不能指定字符串索引值，但在D3 v4中，您可以使用节点上的id属性来允许按名称链接节点。

如果您仍希望能够通过某种字符串ID链接节点，则必须在传递给force()函数之前将这些转换为数字索引：

var links = [ { "source" : "A", "target" : "B", "value" : "1" },
              { "source" : "A", "target" : "C", "value" : "2" },
              { "source" : "A", "target" : "D", "value" : "3" }] ;
var nodes = [ { "name" : "Myriel", "group" : "1", 'id': 'A' },
              { "name" : "Napoleon", "group" : "1" , 'id': 'B'},
              { "name" : "Mlle.Baptistine", "group" : "1", 'id': 'C' }, 
              { "name" : "Mme.Magloire", "group" : "1" , 'id': 'D'}] ;

for (var i = 0, leni = links.length; i < leni; i++) {
  for (var j = 0, lenj = nodes.length; j < lenj; j++) {
    if (links[i].source == nodes[j].id) {
      links[i].source = j;
    }
    if (links[i].target == nodes[j].id) {
      links[i].target = j;
    }
  }
}

（另外，你提供的原始数据比节点有更多的源/目标。你已经列出了'J'，但是只有足够的节点可以列出'I'）

TypeError：无法读取属性＆＃39; push＆＃39;未定义的D3？

2 个答案: