用了d3的工具sankey diagram, 它的demo就是Sankey Diagram.htm文件。原网址为：https://bost.ocks.org/mike/sankey/
服务器中打开t_mySankey.htm 查看demo。
重要改动：
- 输入数据加了level项，解决了默认没有target的结点level级数为最后一级的问题。
- 相应地修改了sankey.js处理level的代码。
- 增加每个节点的input 和 output 统计。
配置项说明(configs)：
var nodeWidth = 100; //节点宽度
var linkHLWidth = 10; //linkHorizonalLineWidth
var nodePadding = 1.5 * linkHLWidth; //节点上下间距
var margin = {top: 10, right: 20, bottom: 20, left: 10}, //间距
width = 960 - margin.left - margin.right, //宽
height = 500 - margin.top - margin.bottom; //高
- createHead() 中涉及头部各层汇总信息内容和样式的修改。
- createJqNodes() 涉及结点内容和样式的修改。
- createFloatTag() 涉及浮框样式的修改。
- allClickListener() 涉及显示全部数据时点击了节点或链接之后的响应。Ajax调用以及相关处理都在此处修改。
- $("#chart").delegate("div.rect", "mouseover", function () {}) 鼠标移上节点的事件响应，涉及浮框内容的修改。
- $("#chart").delegate("div.rect", "mouseout", function () {}) 鼠标移出节点的事件响应，默认响应为隐藏浮框。
- $("#chart").on("click", function () {}) 显示部分数据时鼠标点解响应。
1.data
var data = {
nodeIndex: {}, // key is level + '_' + name
linkIndex: {}, // key is sourceIndexInArray + '_' + targetIndexInArray
nodes: undefined,
links: undefined,
rects: [] //jqnodes array
};
2.node
{
color: "white", //node color
x: 0, //node left
y: 0, //node top
dx: 100, //node width
dy: 455, //node height
indexInArray: 0, //node's index in nodes array
input: 0, //node's input sum (links value sum as target node)
output: 6, //node's output sum (links value sum as source node)
value: 6, //node value (max of input and output)
level: 0, //node level
name: "总点击量", //node name
sourceLinks: Array[2], //node's links array as source node
targetLinks: Array[0], //node's links array as target node
rect: p.fn.p.init[1] //node's jqNode
}
3.link
{
dy: 227.5, //link path height
sy: 0, //link path source end y
ty: 0, //link path target end y
source: Object, //source node
target: Object, //target node
value: 3 //link value
}