javascript - 在当前返回 Uncaught TypeError : Cannot read property 'weight' of undefined 的节点 d3.js 之间创建链接

Question

我有以下 json 结构:

data = {  
           "nodes":[  
              {  
                 "nodeType":"File",
                 "nodeId":16392,
                 "property1":"coint_ctolocal_partitions",
                 "property2":null,
                 "group":0,
                 "more":false
              },
              {  
                 "nodeType":"File",
                 "nodeId":16386,
                 "property1":"pers_contrato_partitions",
                 "property2":null,
                 "group":0,
                 "more":false
              }
           ],
           "links":[  
              {  
                 "source":16386,
                 "target":16392,
                 "value":0,
                 "val":"{\"Contract\":[\"Insurance\"]}",
                 "type":"PTN"
              }
           ]
        }; 

目前这正在返回 Uncaught TypeError: Cannot read property 'weight' of undefined。

在我们的测试数据中，我们简单地使用了 source:0 和 target:1 并且这是有效的，因为我假设它使用节点索引将对象链接在一起。或者可能是 linkindex 函数。

完整的函数如下所示:

returnTableRelationshipData = function(){

        data = {} // json data as described above  

        // used to store the number of links between two nodes. 
        // mLinkNum[data.links[i].source + "," + data.links[i].target] = data.links[i].linkindex;
        var mLinkNum = {};

        // sort links first
        sortLinks();                                

        // set up linkIndex and linkNumer, because it may possible multiple links share the same source and target node
        setLinkIndexAndNum();

        // check that we don't have empty or null values
        checkDataNotEmpty();

        var w = 600,
            h = 500;

        var force = d3.layout.force()
                    .nodes(d3.values(data.nodes))
                    .links(data.links)
                    .size([w, h])
                    .linkDistance(150)
                    .charge(-300)
                    .on("tick", tick)
                    .start();

        var svg = d3.select(".graphContainer").append("svg:svg")
                    .attr("width", w)
                    .attr("height", h);

        var path = svg.append("svg:g")
                    .selectAll("path")
                    .data(force.links())
                    .enter().append("svg:path")
                    .attr("class", "link");

        var circle = svg.append("svg:g")
                    .selectAll("circle")
                    .data(force.nodes())
                    .enter().append("svg:circle")
                    .attr("r", 6)
                    .call(force.drag);

        var text = svg.append("svg:g")                                
                    .selectAll("g")
                    .data(force.nodes())
                    .enter().append("svg:g");

        // A copy of the text with a thick white stroke for legibility.
        text.append("svg:text")
            .attr("x", 12)
            .attr("y", ".31em")
            .attr("class", "shadow")
            .text(function(d){ return d.property1; });   

        text.append("svg:text")
            .attr("x", 12)
            .attr("y", ".31em")
            .text(function(d){ return d.property1; });

        // Use elliptical arc path segments to doubly-encode directionality.
        function tick() {
            path.attr("d", function(d){
                var dx = d.target.x - d.source.x,
                    dy = d.target.y - d.source.y,
                    dr = Math.sqrt(dx * dx + dy * dy);
                // get the total link numbers between source and target node
                var lTotalLinkNum = mLinkNum[d.source.id + "," + d.target.id] || mLinkNum[d.target.id + "," + d.source.id];
                if(lTotalLinkNum > 1)
                {
                    // if there are multiple links between these two nodes, we need generate different dr for each path
                    dr = dr/(1 + (1/lTotalLinkNum) * (d.linkindex - 1));
                }       
                // generate svg path
                return "M" + d.source.x + "," + d.source.y + 
                    "A" + dr + "," + dr + " 0 0 1," + d.target.x + "," + d.target.y + 
                    "A" + dr + "," + dr + " 0 0 0," + d.source.x + "," + d.source.y;    
            });

            circle.attr("transform", function(d){
                return "translate(" + d.x + "," + d.y + ")";
            });

            text.attr("transform", function(d){
                return "translate(" + d.x + "," + d.y + ")";
            });
        } 

        // sort the links by source, then target
        function sortLinks(){
            if(data.links != null){                         
                data.links.sort(function(a,b){
                    if(a.source > b.source){
                        return 1;
                    }else if(a.source < b.source){
                        return -1;
                    }else{
                        if(a.target > b.target){
                            return 1;
                        }if(a.target < b.target){
                            return -1;
                        }else{
                            return 0;
                        }
                    }
                });
            }
        }

        //any links with duplicate source and target get an incremented 'linknum'
        function setLinkIndexAndNum(){                              
            for(var i = 0; i < data.links.length; i++){
                if(i != 0 &&
                    data.links[i].source == data.links[i-1].source &&
                    data.links[i].target == data.links[i-1].target){
                    data.links[i].linkindex = data.links[i-1].linkindex + 1;
                }else{
                    data.links[i].linkindex = 1;
                }// save the total number of links between two nodes
                if(mLinkNum[data.links[i].target + "," + data.links[i].source] !== undefined){
                    mLinkNum[data.links[i].target + "," + data.links[i].source] = data.links[i].linkindex;
                }else{
                    mLinkNum[data.links[i].source + "," + data.links[i].target] = data.links[i].linkindex;
                }
            }
        }

        function checkDataNotEmpty(){
            data.links.forEach(function(link, index, list) {
                if (typeof link.source === 'undefined') {
                    console.log('undefined link', data.nodes[link.source]);
                }
                if (typeof link.target === 'undefined') {
                    console.log('undefined source', data.nodes[link.target]);
                }
                console.log(typeof link.source, typeof link.target);
            });
        }

}

$(document).ready(function(){
    returnTableRelationshipData();
});

在节点数据中，我们有 nodeId 来唯一标识节点。我们还有 property1，这是一个唯一的表名。

所以我需要一些方法来使用自定义 json 键在现有数据之间设置源和目标，如果可能的话？ (即映射 nodeId 为源或目标)。

起初我以为我遇到了整数、字符串等问题，但如果有帮助，我们可以在它们之间进行转换。 (我的意思是我确实尝试过但没有成功)。

我在这里做了一个 fiddle :https://jsfiddle.net/lharby/j1q1oLzL/1/

Answer 1

你可以这样做，将目标/源 id 转换为它在节点数组中的索引:

//find the node index
function find(f){
  var i = -1
    data.nodes.forEach(function(node, index){
        if(node.nodeId == f)
            i = index;
    });
    return i;
}
//set the source and target index
data.links.forEach(function(d){
            d.source = find(d.source);
            d.target = find(d.target);
        });

链接源目标必须是节点数组的索引，如 docs 中所述

工作代码here