javascript - TypeError: Cannot read property 'push' of undefined D3? -
i don't know d3 chart doesn't work. i've been trying 2 days no result. it's throwing typeerror: cannot read property 'push' of undefined error. here complete code
<!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> what wrong file above?
for example have similar test file works fine . here
<!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> this second file works fine. don't see syntax errors in first file. in fact similar. why doesn't second 1 work?
the source , target values of links represent indexes of objects in nodes array. these can either string values or numbers, if string values, nodes need have explicit index property.
you either need add id property each node (if using d3 4.x), or change source/target properties in links array numbers corresponding indexes each node (for either d3 3.x or 4.x).
eg:
var links = [ { "source" : 0, "target" : 1, "value" : 1 }, { "source" : 1, "target" : 2, "value" : 2 } ... ] ; or:
var nodes = [ { "name" : "myriel", "group" : 1 , id: "a"}, { "name" : "napoleon", "group" : 1, id: "b" } ... ]; 
Comments
Post a Comment