Code mit $ andernfalls nicht definiert: Uncaught Referenzfehler und Uncaught Typeerror: kann Eigenschaft 'getAttribute' von null lesen

Unten ist mein HTML-Seite:

<!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>

im Entwicklermodus meine var idData aussieht wie folgt: es ist ein Array von Arrays, wenn die Länge nicht fest ist, sondern die Positionierung von Elementen innerhalb es ist immer die gleiche ..

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

Unten ist mein d3.js Code eine Kraft gerichteten Graphen zu machen:

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 ist ein Knotenattribut und var Paytime, TXN_COUNT, Total_Amt, Sendtime sind Verbindungsattribute. Ich brauche eine Möglichkeit, diese Vars als Text zu Knoten und Links hinzuzufügen.

Auch, wenn ich diesen Code ausführen schlägt es mit:

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

und ich sehe diese ganze Datensatz als Teil des Fehlers:

[["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"]]

Ich denke, alle Skripte richtig referenziert werden in mein HTML. Also, ich weiß nicht, warum ich den Fehler bekomme.

Quelle

2016-10-20 mysterious_guy

$ nicht definiert ist ein sicheres Zeichen dafür, dass jQuery nicht geladen wird. Überprüfen Sie die Registerkarte Netzwerk/Ressourcen, um sicherzustellen, dass sie geladen ist. – Terry

@Terry-Skripte geladen gut in Ressourcen und unter Netzwerk Registerkarte beide haben den Status von 200, die ich denke, bedeutet "OK" –

Ihre ' fehlt eine Schließung " – Mark

Das Problem besteht darin, das SVG-Tag "Network_graph" auszuwählen. Aber Sie können nicht sagen, weil Sie Ihre makeGraph Funktion als Black Box geschrieben haben. Ich empfehle, die Umstrukturierung wie so hoch:

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

Aber das ist nebensächlich, ist der Punkt, dass „Network_graph“ nicht wirklich ein gültiger CSS-Selektor ist. Sie wollen wie so die CSS-ID-Selektor verwenden:

d3.select('#Network_graph');

Was die $ nicht, versuchen Sie mit jQuery ersetzen definiert ist und sehen, ob das Problem weiterhin besteht.

Quelle

2016-10-20 20:46:24

Also habe ich makeGraph ("# Network_graph", startnodes, endnodes); und der Uncaught-Referenzfehler ist weg. Aber einen anderen Fehler bekommen. Code oben bearbeitet. –

@mysterious_guy Sie haben nun die Frage komplett geändert (von einem JavaScript-Fehler zur Verwendung der d3-API), was als unhöflich und schlecht angesehen wird. Das richtige Vorgehen beim Überlauf des Stacks ist, dass Sie die Antwort auf die ursprüngliche Frage akzeptieren und dann eine neue Frage stellen. –

Code mit $ andernfalls nicht definiert: Uncaught Referenzfehler und Uncaught Typeerror: kann Eigenschaft 'getAttribute' von null lesen

Antwort

Verwandte Themen