d3.js节点和边格式

d3.js节点和边格式,d3.js,force-layout,D3.js,Force Layout,我正在尝试使用d3.js绘制一个力布局。我要传递给d3以生成force布局的json对象具有正确的格式,但我得到以下错误: TypeError: e[u.source.index] is undefined ...++a)e[a]=[];for(a=0;s>a;++a){var u=M[a];e[u.source.index].push(u.target),e[u.tar... 注意e[u.source.index].push(u.target) 我的json对象由两个对象组成: 节点

我正在尝试使用d3.js绘制一个力布局。我要传递给d3以生成force布局的json对象具有正确的格式,但我得到以下错误:

TypeError: e[u.source.index] is undefined

...++a)e[a]=[];for(a=0;s>a;++a){var u=M[a];e[u.source.index].push(u.target),e[u.tar...
注意e[u.source.index].push(u.target)

我的json对象由两个对象组成:

  • 节点
  • 边缘
  • 节点是一个对象列表,其中包含节点数据(据我所知,它可以是任何对象),边是一个对象列表,它引用源和目标属性中的节点对象

    这是我的代码片段:

    
    身体{
    字体:10px无衬线;
    形状渲染:边缘清晰;
    }
    .link.flow{
    不透明度:1!重要;
    /*笔划宽度:1.5px*/
    }
    #许可证{
    填充:绿色;
    }
    .link.flow.licensing{
    笔画:绿色;
    }
    .link.flow.resolved{
    笔划数组:0,2 1;
    }
    循环流动{
    填充:#ff2575;
    冲程:#ff2575;
    /*笔划宽度:1.5px*/
    }
    文本流{
    字体:10px无衬线;
    指针事件:无;
    文本阴影:01px0#fff,1px0#fff,0-1px0#fff,-1px0#fff;
    }
    path.link.flow{
    填充:无;
    }
    var-maxWeight=0;
    var maxSize=0;
    //新图形:开始
    var保证金=10;
    可变宽度=455,
    高度=350;
    var svgMaster=d3.select(“body”).append(“svg”)//初始化svg
    .attr(“id”、“流量”)
    .attr(“宽度”,宽度)
    .attr(“高度”,高度)
    .样式(“右边距”,右边距+“px”)
    .样式(“左边距”,右边距+px”);
    var svg=svgMaster.append('svg:g')
    .attr('id','groupFlow');
    var link=svg.selectAll(“.link”),
    node=svg。选择全部(“.node”);//节点和链接
    //:结束新图形
    var jsonData={
    “节点”:[
    {“用户名”:“S_Christophorus”,“社交网络id”:“55641120cdfa6618acdd1952”,“姓氏”:
    “克里斯托弗”、“名字”:“斯坦利”、“阿凡达”:“/media/avatars/C02.png”、“人名”:“556431f3cdfa661108325774”
    ,id:“55641120cdfa6618acdd1a8e”},
    {“用户名”:“A_字段”,“社会网络id”:“55641120cdfa6618acdd1952”
    ,“姓”:“字段”,“名”:“阿卜杜勒”,“阿凡达”:“/media/avatars/B01.png”,“人名”:“556431f3cdfa6611083257f6”
    ,id:“55641120cdfa6618acdd1b94”},
    {“用户名”:“B_Hugh”,“社会网络id”:“55641120cdfa6618acdd1952”
    ,“姓”:“休”,“名”:“比尔”,“阿凡达”:“/media/avatars/B02.png”,“人名”:“556431f3cdfa6611083257f7”
    ,id:“55641120cdfa6618acdd1b96”},
    {“用户名”:“M_Kennedy”,“社会网络id”:“55641120cdfa6618acdd1952”
    ,“姓”:“肯尼迪”,“名”:“病态”,“化身”:“/media/avatars/B05.png”,“人名”:“556431facdfa66108327e21”
    ,“id”:“55641128cdfa6618acdd9fed”}
    ], 
    “边缘”:[
    {“源”:“0”,“目标”:“1”,“权重”:1.5},
    {“源”:“2”,“目标”:“0”,“权重”:46.5},
    {“源”:“0”,“目标”:“2”,“权重”:6.0},
    {“源”:“2”,“目标”:“1”,“权重”:1.5},
    {“源”:“2”,“目标”:“3”,“权重”:3.0}
    ]
    }
    /*
    *基于给定数据刷新图形
    */
    var refreshForceFlow=函数(json){
    clearGraphFlow();
    var-maxWeight=0;
    对于(var-edgeIndex=0;edgeIndexmaxWeight)maxWeight=json.edges[edgeIndex];
    }
    log(json);
    var-force=d3.layout.force()
    .nodes(d3.values(json.nodes))
    .links(json.edges)
    .尺寸([宽度、高度])
    .linkDistance(60)
    。收费(-300)
    .on(“滴答”,滴答流)
    .start();
    //每类型标记,因为它们不继承样式。
    svg.append(“defs”).selectAll(“marker”)
    .data(json.edges)
    .enter().append(“标记”)
    .attr(“id”,函数(d){return(“weight”+d.weight).replace(“.”,“”)})
    .attr(“视图框”,“0-5 10”)
    .attr(“参考文献”,13)//15
    .attr(“参考文献”,0)/-1.5
    .attr(“markerWidth”,6)
    .attr(“markerHeight”,6)
    .attr(“方向”、“自动”)
    .append(“路径”)
    .样式(“填充”,功能(d){
    var color='FF';
    var c=数学地板((d.weight*99)/最大重量);
    c=100-c;
    如果(c<10)c='0'+c;
    颜色=c+颜色;
    颜色=c+颜色;
    //console.log(“#”+颜色);
    返回“#”+颜色;
    })
    .样式(“笔划”,功能(d){
    var color='FF';
    var c=数学地板((d.weight*99)/最大重量);
    c=100-c;
    如果(c<10)c='0'+c;
    颜色=c+颜色;
    颜色=c+颜色;
    //console.log(“#”+颜色);
    返回“#”+颜色;
    })
    .style(“笔划宽度”、“1px”)
    .attr(“d”,“M0,-5L10,0L0,5”);
    var path=svg.append(“g”).selectAll(“path”)
    .data(force.links())
    .enter().append(“路径”)
    .attr(“类”,函数(d){返回“链接流”;})
    .样式(“笔划宽度”,功能(d){
    var res=1+((d.重量*2.5)/最大重量);
    返回res+‘px’;
    })
    .样式(“笔划”,功能(d){
    var color='FF';
    var c=数学地板((d.weight*99)/最大重量);
    c=100-c;
    如果(c<10)c='0'+c;
    颜色=c+颜色;
    颜色=c+颜色;
    //console.log(“#”+颜色);
    返回“#”+颜色;
    })
    .attr(“标记结束”,函数(d){return“url”(#“+(“weight_“+d.weight”)。替换(“.”,““+”)”);});
    var circle=svg.append(“g”).selectAll(“circle”)
    .data(force.nodes())
    .enter().append(“圆”)
    .attr(“r”,6)
    .attr(“类”、“流”)
    .on(“上下文菜单”,d3.上下文菜单(菜单))
    .呼叫(强制拖动);
    var text=svg.append(“g”).selectAll(“text”)
    .data(force.nodes())
    .enter().append(“文本”)
    .attr(“类”、“流”)
    .attr(“x”,8)
    .attr(“y”,“.31em”)
    .text(函数(d){返回d.username;});
    //使用椭圆弧路径段对方向性进行双重编码。
    函数流(){
    路径属性(“d”,链接弧);
    circle.attr(“transform”,transform);
    attr(“transform”,transform);
    }
    功能链接弧(d){
    var tx=d.target.x-0;
    var ty=d.target.y-0;
    var sx=d.source.x-0;
    var sy=d.source.y-0;
    变量dx=tx-sx,
    dy=ty-sy,
    dr=Math.sqrt(dx*dx+dy*dy);
    返回“M”+d.source.x+”、“+d.source.y+”A“+dr+”、“+dr+”0,1“+d.target.x+”、“+d.target.y”;
    }
    函数变换(d){
    返回“translate”(“+d.x+”,“+d.y+”);
    }
    };  //  功能结束
    /*
    *晴朗
    */
    var clearGraphFlow=函数(){
    svg.选择全部(“g”).删除
    
    "edges": [
        {"source": 0, "target": 1, "weight": 1.5}, 
        {"source": 2, "target": 0, "weight": 46.5}, 
        {"source": 0, "target": 2, "weight": 6.0}, 
        {"source": 2, "target": 1, "weight": 1.5}, 
        {"source": 2, "target": 3, "weight": 3.0}
    ]