d3.js节点和边格式
我正在尝试使用d3.js绘制一个力布局。我要传递给d3以生成force布局的json对象具有正确的格式,但我得到以下错误: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对象由两个对象组成: 节点
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}
]