和弦图

$.getJSON('./data/relationshipHasWeight.json', function(data) { var Stat = G2.Stat;// 统计算法对象 var Layout = G2.Layout;// 布局算法对像 var nodes = data.nodes; // 节点数据 var links = data.links; // 边数据 var chart = new G2.Chart({ id: 'c1', forceFit: true, height: 500, animate: false, plotCfg: { margin: [70,0,60,0] } }); chart.tooltip({ title: null }); // 线性布局 var layout = new Layout.Linear({ nodes: nodes, hasWeight: true, // 带权重的布局 margin: 0.004 // 节点边距 }); nodes = layout.getNodes(); // 获取布局后的节点数据 // 创建边的视图 var edgeView = chart.createView(); edgeView.source(links); edgeView.coord('polar').reflect('y'); // 使用极坐标，反转y轴(布局方法默认给y赋值为0) edgeView.axis(false); chart.legend(false); // 由于边的坐标数据较多，此处使用统计函数简化语法，Stat.link计算布局后的边的坐标，放在..x和..y中，数值范围是 0-1 edgeView.edge() .position(Stat.link.weight('source*target*sourceWeight*targetWeight',nodes)) .shape('arc') // 使用弧线完成边的绘制 .color('source') .opacity(0.5) .tooltip('sourceWeight*targetWeight'); // 创建节点视图 var nodeView = chart.createView(); nodeView.coord('polar').reflect('y'); nodeView.axis(false); nodeView.source(nodes); nodeView.point() .position('x*y') // nodes数据的x、y由layout方法计算得出 .color('id') .size('width*height',function(width,height){ //将布局算法计算得出的节点宽高映射到size上 return [width,height]; }) .shape('rect').style({ stroke:"#ccc" // 节点边框 }) .tooltip('name*value') .label('name',{ labelEmit: true, fontSize:12 }); chart.render(); });