Question

根据Stephen Thomas https://github.com/sathomas/jsDataV.is-source/tree/master/ch7/force的指南，我试图制作一个d3力布局图。

但是我遇到了一个错误，我不知道它的起源和解决方法。

鉴于以下plunker http://plnkr.co/edit/Bx0qe8DNEsnFgLhkxbfS?p=preview此代码段正在导致

 var positionEdge = function(edge, nodes) {
        edge.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; });
    };

许多错误，例如错误：属性y2的值无效=“NaN”

我构建我的edge数组如下，但要完全能够重现问题，请使用plunker链接：

 var edges = [];
        links.forEach(function(srcLink){
            var targetNodeId;
            var targetNodeName;
            var sourceNodeId;
            var sourceNodeName;

            nodes.forEach(function(srcNode){
              if(srcNode.label === srcLink.source){
                  sourceNodeId = srcNode.id;
                  sourceNodeName = srcNode.label;
              } else if(srcNode.label === srcLink.target){
                  targetNodeId = srcNode.id;
                  targetNodeName = srcNode.label;
              }
            })
            edges.push({
                "id": "From_" + sourceNodeName + "_To_" + targetNodeName,
                "target": targetNodeId,
                "source": sourceNodeId
            });
        })

        // remove duplicate edges
        var arr = {};
        for ( var i=0, len=edges.length; i < len; i++ )
            arr[edges[i]['id']] = edges[i];

        edges = new Array();
        for ( var key in arr )
            edges.push(arr[key]);

调用positionEdge函数时导致所有NaN错误的原因是什么？

Answer 1

边缘中的source和target字段似乎是节点ID，而不是对象。你有两个解决方案：

使用对象：

   edges.push({
        "id": "From_" + sourceNodeName + "_To_" + targetNodeName,
        "target": nodes[targetNodeId],
        "source": nodes[sourceNodeId]
    });

或

使用指数（不好主意，请参阅下面的编辑说明）

var positionEdge = function(edge, nodes) {
    edge.attr("x1", function(d) { return nodes[d.source].x; })
        .attr("y1", function(d) { return nodes[d.source].y; })
        .attr("x2", function(d) { return nodes[d.target].x; })
        .attr("y2", function(d) { return nodes[d.target].y; });
};

d3中的标准是使用第一个选项，但如果你去了，可能会有其他编辑带到你的代码中。使用第二个选项，每次需要边缘端点时，您将无法使用节点[d.source]和节点[d.target]。

修改：实际上，force布局会自动将基于索引的边缘转换为基于对象的边缘。因此，除非您为边使用两个不同的数组，否则您需要选择第一个选项。

D3 - 定位边缘会导致NaN错误

1 个答案: