d3强制有向图的问题

时间:2014-12-18 12:20:40

标签: d3.js force-layout

我使用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个来获取图表。

0 个答案:

没有答案