mysterious_guy mysterious_guy - 1 month ago 14
Javascript Question

d3.js code failing with $ not defined: Uncaught reference error and Uncaught TypeError: Cannot read property 'getAttribute' of null

Below is my html page:

<!doctype html>
<html lang = "en">
<head>
<meta charset="UTF-8">
<title>Networked Graph</title>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://d3js.org/d3.v4.min.js"></script>
<script src="{{url_for('static',filename='graphlogic.js')}}</script>
</head>
<body>
<style>
. links line {
stroke: #999;
stroke-opacity: 0.6;
}
.nodes circle {
stroke: #fff;
stroke-width: 1.5px;
}
.nodes circle {
stroke: #fff;
stroke-width: 1.5px;
}
</style>
<svg id="Network_graph" width="960" height="600"></svg>
<script type="text/javascript">
var IDData = JSON.stringify({{data|safe}});
</script>
<div id="graph"></div>





in developer mode my var IDData looks as follows:
it is an array of array where lentgh is not fixed but positioning of elements inside it is always the same..

var IDData = JSON.stringify([
[
"node/105173",
"node/38180995",
"Agent",
"Customer",
"1379644.0",
1,
264.0,
"1374903"
], [
"node/1061",
.........
]);


Below is my d3.js code to render a force directed graph:

function createNodes (IDData) {

// is this the right way to make nodes?
// also how to assign properties to nodes
var nodes = [{group:1, group: 1}];
var links = [];
IDData.forEach(function(item){
nodes.push({id: item, group: 1})
links.push({source: item, target: item, value: 1}) // missing ;
});
var d3GraphData = {
nodes: nodes,
links: links
}
return d3GraphData;
};


function makeGraph (selector, d3GraphData) {
var svg = d3.select(selector),
width = +svg.attr("width"),
height = +svg.attr("height");

var color = d3.scaleOrdinal(d3.schemeCategory20);
var simulation = d3.forceSimulation()
.force("link", d3.forceLink().id(function(d) { return d.id; }))
.force("charge", d3.forceManyBody())
.force("center", d3.forceCenter(width / 2, height / 2));

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

var node = svg.append("g")
.attr("class", "nodes")
.selectAll("circle")
.data(d3GraphData.nodes)
.enter()
.append("circle")
.attr("r", 5)
.attr("fill", function(d) { return color(d.group); })
.call(d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended)
);

node.append("title")
.text(function(d) { return d.id; });

simulation
.nodes(d3GraphData.nodes)
.on("tick", ticked);

simulation.force("link")
.links(d3GraphData.links);

function ticked() {
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("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; });
}

function dragstarted(d) {
if (!d3.event.active) simulation.alphaTarget(0.3).restart();
d.fx = d.x;
d.fy = d.y;
}

function dragged(d) {
d.fx = d3.event.x;
d.fy = d3.event.y;
}

function dragended(d) {
if (!d3.event.active) simulation.alphaTarget(0);
d.fx = null;
d.fy = null;
}

}

$(document ).ready(function() {
console.log(IDData);
var galData = JSON.parse(IDData);
var startnodes = [];
var endnodes = [];
var nodetype1 = [];
var nodetype2 = [];
var PayTime = [];
var TXN_COUNT = [];
var Total_Amt = [];
var SendTime = [];
///right way to populate the variables?
galData.map(function(e,i){
startnodes.push(e[0]);
endnodes.pusg(e[1]);
nodetype1.push(e[2]);
nodetype1.push(e[3]);
PayTime.push(e[4]);
TXN_COUNT.push(e[5]);
Total_Amt.push(e[6]);
SendTime.push(e[7]);
});

makeGraph("Network_graph",startnodes,endnodes);

});


var nodetype is a node attribute and var Paytime,TXN_COUNT,Total_Amt,SendTime are link attributes. Need a way to add those vars as texts to nodes and links.

Also , when I run this code it fails with:

$not defined Uncaught reference error and Uncaught TypeError: Cannot read property 'getAttribute' of null


and I see this whole dataset as part of the error:

[["node/105173","node/38180995","Agent","Customer","1379644.0",1,264,"1374903"],["node/1061","node/21373542","Agent","Customer","530848.0",1,3000,"529502"],["node/10750","node/59648369","Agent","Customer","1454228.0",1,120,"1454118"],["node/10750","node/78569210","Agent","Customer","1425251.0",1,234,"1421416"],["node/10750","node/96726118","Agent","Customer","1376239.0",1,434,"1376152"],["node/10946829","node/11190","Customer","Agent","1409620.0",20,3380,"1406665"],["node/10946829","node/57774036","Customer","Customer","1460029.0",3,960,"1459731"],["node/109947","node/97911872","Agent","Customer","1323025.0",1,600,"1315582"],["node/11190","node/10946829","Agent","Customer","1552232.0",1,60,"1528755"],["node/11190","node/21373542","Agent","Customer","1445487.0",4,1694,"1432479"],["node/11190","node/21530982","Agent","Customer","1396526.0",4,5428,"1396517"],["node/11190","node/50917084","Agent","Customer","568394.0",1,110,"568380"],["node/11190","node/9837102","Agent","Customer","1485679.0",1,100,"1464486"],["node/113120","node/41382986","Agent","Customer","1327541.0",1,115,"1327526"],["node/11736","node/109816283","Agent","Customer","541087.0",1,300,"504903"],["node/11852","node/84188871","Agent","Customer","1466956.0",1,220,"1465660"],["node/13957774","node/122260","Customer","Agent","1311469.0",1,600,"1309915"],["node/13957774","node/3364","Customer","Agent","1523266.0",1,705,"1523171"],["node/13957774","node/34496","Customer","Agent","1415445.0",1,110,"1413649"],["node/13957774","node/38180995","Customer","Customer","1309063.0",1,981,"1305686"],["node/13957774","node/50706","Customer","Agent","1507302.0",1,100,"1507279"],["node/13957774","node/56357","Customer","Agent","565790.0",1,566,"564113"],["node/13957774","node/57930216","Customer","Customer","1311469.0",3,2205,"1309915"],["node/13957774","node/73290","Customer","Agent","1309063.0",9,3888,"1305686"],["node/13957774","node/74942","Customer","Agent","1364890.0",1,900,"1364667"],["node/13957774","node/79912126","Customer","Customer","577032.0",1,563,"575673"],["node/21042","node/38180995","Agent","Customer","1309063.0",1,981,"1305686"],["node/21373542","node/11190","Customer","Agent","1360573.0",30,14597,"1360504"],["node/21373542","node/26794","Customer","Agent","555473.0",3,729,"554116"],["node/21373542","node/318801","Customer","Agent","578495.0",3,498,"576965"],["node/21373542","node/96726118","Customer","Customer","547027.0",2,620,"546959"],["node/21530982","node/11190","Customer","Agent","1352091.0",9,16089,"1351779"],["node/21530982","node/26794","Customer","Agent","1365616.0",3,855,"1365006"],["node/21530982","node/34971","Customer","Agent","1356124.0",1,232,"1356088"],["node/21530982","node/594","Customer","Agent","1366059.0",1,131,"1365663"],["node/21530982","node/96726118","Customer","Customer","542356.0",1,190,"539601"],["node/21676523","node/1098","Customer","Agent","1455400.0",1,100,"1454479"],["node/21676523","node/11190","Customer","Agent","1313173.0",3,1110,"1308691"],["node/21676523","node/36508","Customer","Agent","1466869.0",2,200,"1465838"],["node/21676523","node/44210","Customer","Agent","1314349.0",2,590,"1313270"],["node/21676523","node/96726118","Customer","Customer","1314517.0",2,190,"1308691"],["node/217106669","node/95506464","ID_Card","Customer","1381993.0",1,241,"1381061"],["node/21767598","node/107904319","Customer","Customer","548231.0",1,70,"547042"],["node/21767598","node/11190","Customer","Agent","1346087.0",2,800,"1345856"],["node/21767598","node/34496","Customer","Agent","1389414.0",6,1720,"1389358"],["node/21767598","node/44210","Customer","Agent","1331714.0",4,1497,"1331581"],["node/21767598","node/57774036","Customer","Customer","1461326.0",1,100,"1460052"],["node/21767598","node/57930216","Customer","Customer","1331714.0",4,1647,"1331581"],["node/21767598","node/78305361","Customer","Customer","1467094.0",2,250,"1467040"],["node/21767598","node/79912126","Customer","Customer","1462602.0",2,1150,"1460055"],["node/21767598","node/97911872","Customer","Customer","1346087.0",2,800,"1345856"],["node/2227","node/50949637","Agent","Customer","542591.0",1,90,"542565"],["node/223142687","node/79912126","ID_Card","Customer","1401002.0",5,3349,"1400955"],["node/233827738","node/38180995","ID_Card","Customer","1309063.0",2,1245,"1305686"],["node/242241128","node/38180995","ID_Card","Customer","534061.0",1,572,"533940"],["node/24598","node/21530982","Agent","Customer","1340319.0",1,967,"1340281"],["node/24598","node/57774036","Agent","Customer","1507220.0",1,400,"1507156"],["node/24598","node/78569210","Agent","Customer","1366161.0",1,1102,"1365085"],["node/24598","node/79912126","Agent","Customer","1401002.0",2,1636,"1400955"],["node/24598","node/97911872","Agent","Customer","1354599.0",1,200,"1354512"],["node/246687492","node/57774036","ID_Card","Customer","1373537.0",14,6078,"1373483"],["node/246822357","node/57930216","ID_Card","Customer","1523266.0",3,2799,"1523171"],["node/26281","node/107904319","Agent","Customer","532576.0",1,200,"528189"],["node/264664319","node/78305361","ID_Card","Customer","1439644.0",4,510,"1439510"],["node/26607156","node/107904319","Customer","Customer","532576.0",1,200,"528189"],["node/26607156","node/109816283","Customer","Customer","541087.0",1,300,"504903"],["node/26607156","node/229153472","Customer","ID_Card","1311457.0",3,4551,"1305670"],["node/26607156","node/34496","Customer","Agent","1311457.0",11,7349,"1305670"],["node/26607156","node/38180995","Customer","Customer","534061.0",1,572,"533940"],["node/26607156","node/44210","Customer","Agent","1381993.0",5,2601,"1381061"],["node/26607156","node/57930216","Customer","Customer","1369110.0",2,2950,"1368981"],["node/26607156","node/78305361","Customer","Customer","1439644.0",2,260,"1439510"],["node/26607156","node/79912126","Customer","Customer","1401002.0",2,1636,"1400955"],["node/26607156","node/84188871","Customer","Customer","1426712.0",2,1571,"1415006"],["node/26607156","node/89031090","Customer","Customer","1429766.0",1,200,"1429513"],["node/26607156","node/94856705","Customer","Customer","1390909.0",1,720,"1390784"],["node/26607156","node/95506464","Customer","Customer","1381993.0",1,241,"1381061"],["node/26607156","node/96726118","Customer","Customer","575821.0",1,100,"575690"],["node/26607156","node/97911872","Customer","Customer","1311457.0",1,1200,"1305670"],["node/26794","node/21530982","Agent","Customer","1366059.0",2,503,"1365617"],["node/269768353","node/84188871","ID_Card","Customer","1426712.0",2,1571,"1415006"],["node/273951326","node/89031090","ID_Card","Customer","1429766.0",1,200,"1429513"],["node/275273379","node/57930216","ID_Card","Customer","1311469.0",14,5014,"1309915"],["node/278851123","node/94856705","ID_Card","Customer","1390909.0",1,720,"1390784"],["node/280383297","node/96726118","ID_Card","Customer","1314517.0",8,1790,"1308691"],["node/281377550","node/97911872","ID_Card","Customer","1311457.0",13,13550,"1305670"],["node/28617767","node/30500","Customer","Agent","1449759.0",1,140,"1446840"],["node/28617767","node/57774036","Customer","Customer","1449759.0",1,140,"1446840"],["node/288503186","node/21767598","ID_Card","Customer","525192.0",1,517,"518059"],["node/289751108","node/107904319","ID_Card","Customer","532576.0",1,200,"528189"],["node/291424813","node/109816283","ID_Card","Customer","541087.0",1,300,"504903"],["node/292764242","node/107904319","ID_Card","Customer","548231.0",1,70,"547042"],["node/30500","node/28617767","Agent","Customer","1442532.0",2,382,"1441513"],["node/30500","node/57930216","Agent","Customer","1331714.0",2,315,"1330439"],["node/30825","node/21676523","Agent","Customer","1347475.0",1,360,"1347336"],["node/318159","node/57774036","Agent","Customer","577148.0",1,231,"577065"],["node/318159","node/96726118","Agent","Customer","547027.0",2,620,"546959"],["node/318801","node/21373542","Agent","Customer","578495.0",3,498,"576965"],["node/32128","node/5864083","Agent","Customer","567267.0",1,146,"566989"],["node/3234768","node/12059","Customer","Agent","1340096.0",4,1600,"1338967"],["node/3234768","node/57774036","Customer","Customer","1537440.0",2,800,"1537296"],["node/3400292","node/2227","Customer","Agent","1413884.0",1,47,"1413760"],["node/3400292","node/47479","Customer","Agent","1331716.0",3,305,"1330439"],["node/3400292","node/57930216","Customer","Customer","1331716.0",4,352,"1330439"],["node/3552445","node/11190","Customer","Agent","1321515.0",22,8729,"1321397"],["node/3552445","node/26794","Customer","Agent","1341655.0",13,2526,"1341558"],["node/3552445","node/44210","Customer","Agent","1325929.0",12,2114,"1325888"],["node/3552445","node/47105","Customer","Agent","1366122.0",1,150,"1366007"],["node/3552445","node/57774036","Customer","Customer","1456987.0",1,300,"1456928"],["node/3552445","node/96726118","Customer","Customer","1376239.0",1,434,"1376152"],["node/36876271","node/54237","Customer","Agent","1373537.0",1,93,"1373483"],["node/36876271","node/57774036","Customer","Customer","1373537.0",1,93,"1373483"],["node/37462520","node/11190","Customer","Agent","1339032.0",3,5250,"1335979"],["node/37462520","node/138138801","Customer","Phone","1798173",1,900,"1795111"],["node/37462520","node/233375474","Customer","ID_Card","1333142.0",5,8250,"1331529"],["node/37462520","node/34496","Customer","Agent","1314404.0",7,6300,"1314302"],["node/37462520","node/97911872","Customer","Customer","1314404.0",10,11550,"1314302"],["node/37498","node/57930216","Agent","Customer","1537660.0",1,94,"1537605"],["node/38180995","node/233827738","Customer","ID_Card","1360339.0",1,240,"1359356"],["node/38180995","node/242241128","Customer","ID_Card","572806.0",1,224,"569839"],["node/38180995","node/40133","Customer","Agent","1360339.0",2,464,"1359356"],["node/38180995","node/59648369","Customer","Customer","1360339.0",1,240,"1359356"],["node/38180995","node/78569210","Customer","Customer","572806.0",1,224,"569839"],["node/3988","node/38180995","Agent","Customer","534061.0",1,572,"533940"],["node/3988","node/57930216","Agent","Customer","1311469.0",12,6993,"1309915"],["node/3988","node/59648369","Agent","Customer","1364760.0",4,901,"1363402"],["node/3988","node/78305361","Agent","Customer","1439644.0",4,510,"1439510"],["node/3988","node/78569210","Agent","Customer","1441112.0",1,140,"1440116"],["node/3988","node/94856705","Agent","Customer","1390909.0",1,720,"1390784"],["node/3988","node/95506464","Agent","Customer","1381993.0",1,241,"1381061"],["node/3988","node/96726118","Agent","Customer","575821.0",2,356,"575690"],["node/3988","node/97911872","Agent","Customer","1311457.0",6,7700,"1305670"],["node/41382986","node/113120","Customer","Agent","1312869.0",3,518,"1311790"],["node/41382986","node/57930216","Customer","Customer","1312869.0",1,303,"1311790"],["node/42799","node/84188871","Agent","Customer","1426712.0",1,1351,"1415006"],["node/44118504","node/21767598","Customer","Customer","525192.0",1,517,"518059"],["node/44118504","node/237596017","Customer","ID_Card","525192.0",1,517,"518059"],["node/44118504","node/725","Customer","Agent","525192.0",1,517,"518059"],["node/44210","node/21676523","Agent","Customer","1313266.0",1,510,"1313177"],["node/44210","node/21767598","Agent","Customer","525192.0",1,517,"518059"],["node/45929","node/107904319","Agent","Customer","548231.0",1,70,"547042"],["node/46619","node/57930216","Agent","Customer","566997.0",1,176,"565619"],["node/49620","node/59648369","Agent","Customer","1351956.0",7,1952,"1351872"],["node/49620","node/78569210","Agent","Customer","1405015.0",4,870,"1404966"],["node/49620","node/89031090","Agent","Customer","1429766.0",1,200,"1429513"],["node/50917084","node/11190","Customer","Agent","568394.0",6,1106,"568376"],["node/50917084","node/96726118","Customer","Customer","578758.0",1,256,"578624"],["node/50949637","node/2227","Customer","Agent","566997.0",6,1432,"565619"],["node/50949637","node/57930216","Customer","Customer","566997.0",3,356,"565619"],["node/52368268","node/2723","Customer","Agent","577148.0",1,231,"577065"],["node/52368268","node/57774036","Customer","Customer","577148.0",1,231,"577065"],["node/54237","node/36876271","Agent","Customer","1421016.0",3,695,"1420930"],["node/5864083","node/119428","Customer","Agent","1419742.0",2,280,"1419720"],["node/5864083","node/20514","Customer","Agent","1577734.0",1,94,"1575388"],["node/5864083","node/21199","Customer","Agent","1563464.0",1,141,"1555202"],["node/5864083","node/32128","Customer","Agent","1310104.0",25,5916,"1309045"],["node/5864083","node/38180995","Customer","Customer","1379644.0",1,264,"1374903"],["node/5864083","node/45202","Customer","Agent","1399277.0",1,237,"1396643"],["node/5864083","node/9238","Customer","Agent","1379644.0",1,264,"1374903"],["node/6643129","node/11190","Customer","Agent","1372272.0",6,2159,"1372134"],["node/6643129","node/26794","Customer","Agent","1576415.0",1,300,"1576375"],["node/6643129","node/44210","Customer","Agent","1369130.0",4,437,"1368964"],["node/6643129","node/57774036","Customer","Customer","1466916.0",1,220,"1465415"],["node/71367","node/28617767","Agent","Customer","1435432.0",1,293,"1433759"],["node/71367","node/57774036","Agent","Customer","1373537.0",12,5447,"1373483"],["node/71367","node/57930216","Agent","Customer","1419567.0",1,235,"1419511"],["node/71367","node/79912126","Agent","Customer","1491585.0",1,900,"1491490"],["node/71367","node/96726118","Agent","Customer","1314517.0",3,380,"1308691"],["node/71367","node/97911872","Agent","Customer","1339029.0",4,4650,"1332931"],["node/8287169","node/12059","Customer","Agent","1554750.0",2,1500,"1553214"],["node/8287169","node/57774036","Customer","Customer","1554750.0",1,1200,"1553214"],["node/84508","node/10946829","Agent","Customer","1576415.0",1,300,"1576375"],["node/92814","node/21530982","Agent","Customer","1321695.0",1,5000,"1321350"],["node/92814","node/79912126","Agent","Customer","1462602.0",2,813,"1460055"],["node/92814","node/97911872","Agent","Customer","1346087.0",1,400,"1345856"],["node/9530944","node/11190","Customer","Agent","1564917.0",1,1800,"1564780"],["node/9530944","node/57774036","Customer","Customer","1564917.0",1,1800,"1564780"],["node/9837102","node/11190","Customer","Agent","1313093.0",14,7931,"1313055"],["node/9837102","node/15987","Customer","Agent","1354658.0",1,150,"1353302"],["node/9837102","node/26794","Customer","Agent","1412451.0",3,520,"1412381"]]


But I think all the scripts are referenced properly in my HTML. So , don't know why the error. Apologize in advance if pasting the HTML part was irrelevant. Did not want to leave out details. And this is my first time with d3.js.

Answer

The problem is in trying to select the SVG tag "Network_graph". But you can't tell, because you've written you're makeGraph function as a black box. I highly recommend restructuring like so:

function makeGraph(svg, data) { // pass in the node directly
   // set up d3
}

But that's beside the point, the point is that "Network_graph" isn't really a valid css selector. You want to use the css id selector like so:

d3.select('#Network_graph');

As for the $ not being defined, try replacing with jQuery and see if the problem persists.