以下是我的html页面：
<!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>
在开发者模式下，我的var IDData如下所示： 它是一个数组数组，其长度不固定，但其中元素的位置始终相同..
var IDData = JSON.stringify([
[
"node/105173",
"node/38180995",
"Agent",
"Customer",
"1379644.0",
1,
264.0,
"1374903"
], [
"node/1061",
.........
]);
下面是我的d3.js代码，用于渲染强制导向图：
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是节点属性，var paytime，TXN_COUNT，Total_Amt，SendTime是链接属性。我需要一种方法将这些变量作为文本添加到节点和链接。
此外，当我运行此代码时，它失败了：
$not defined Uncaught reference error and Uncaught TypeError: Cannot read property 'getAttribute' of null
我将整个数据集视为错误的一部分：
[["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"]]
我认为我的HTML中正确引用了所有脚本。所以，我不知道为什么我会收到错误。
答案 0 :(得分：0)
问题在于尝试选择SVG标签＆＃34; Network_graph＆＃34;。但是你无法说出来，因为你已经把你makeGraph写成了黑盒子。我强烈建议像这样重组：
function makeGraph(svg, data) { // pass in the node directly
// set up d3
}
但除此之外，关键在于＆＃34; Network_graph＆＃34;并不是一个真正有效的CSS选择器。你想像这样使用css id选择器：
d3.select('#Network_graph');
对于未定义的$，请尝试使用jQuery替换，看看问题是否仍然存在。