我使用d3js渲染力导向图。设计是通过查询数据库在运行时将节点添加到图形中。这很好。
在逐行节点渲染图形时,如果我碰巧在屏幕上的任何地方单击,有时候,传入节点会卡在div的左上角,并且在调试时会显示以下错误:
Error: Invalid value for <line> attribute x2="NaN"
Error: Invalid value for <g> attribute transform="translate(NaN,NaN)"
有时,即使已经形成的链接中断,旧节点也会卡在左上角,直到下一次刷新。
如果我不干涉,渲染就会顺利完成。
我真的不明白这种行为。有没有人知道这里一定有什么问题?
找到我的代码来计算下图:
var graph = { "nodes": [], "links": [] };
var nodeMap = [];
var timestamp;
var json_obj;
var newLogs = false;
$(document).ready(function () {
var count = 0;
doPoll();
function doPoll() {
json_obj = "some object";
var uri = 'api/values?id=' + json_obj;
newLogs = false;
$.getJSON(uri)
.done(function doPoll(data) {
$.each(data, function (key, item) {
newLogs = true;
timestamp = item.timestamp;
populateJson();
function populateJson() {
if (nameExistsInNodes(item.entityName) && item.state == "1") {
searchAndRemoveFromGraph(item.entityName);
}
if (item.entityId != null && !idExistsInNodes(item.entityId)) {
graph.nodes.push({
"eId": item.entityId,
"name": item.entityName,
"state": item.state
});
} else if (item.state == "0" && item.entityId == null) {
graph.nodes.push({
"eId": item.entityName,
"name": item.entityName,
"state": item.state
});
} else if (idExistsInNodes(item.entityId)) {
updateEntityInfo(item);
}
if (!existsInMap(item.entityId) && item.entityId != null) {
nodeMap.push({ "id": item.entityId, "index": count++ });
}
if (item.mapsTo != null && !existsInLinks(findIndexForId(item.entityId), findIndexForId(item.mapsTo))
&& findIndexForId(item.entityId) != null && findIndexForId(item.mapsTo) != null) {
graph.links.push({
"source": findIndexForId(item.entityId),
"target": findIndexForId(item.mapsTo)
});
}
}
});
if (newLogs) {
renderUsingD3(graph);
}
}) // end done
.always(function () { setTimeout(doPoll, 3000) })
} // end doPoll
});
每个进来的项目都有一个id,名称和状态,我的逻辑使用这3个来获取图表。