基于sankey图制作了一个社区成员变迁图,矩形与link上的文字均可以经过拖动改变位置。
代码运行结果:
javascript源码:
<!DOCTYPE html>
<meta charset="utf-8">
<title>Sankey Prototype</title>
<style>
text{
display:block;
}
.link {
fill: none;
stroke: #18c0ff;
stroke-opacity: .2;
}
.link:hover {
stroke-opacity: .5;
}
.label {
font-size: 8;
fill: red;
stroke: #000;
stroke-opacity: .8;
}
</style>
<body>
<p id="chart">
<script src="d3.js"></script>
<script src="sankey.js"></script>
<script>
var units = "Units";
var nodewidth=160;
var margin = {top: 80, right: 10, bottom: 30, left: 310},
width = 1500 - margin.left - margin.right,
height = 750 - margin.top - margin.bottom;
var formatNumber = d3.format(",.0f"), // zero decimal places
format = function(d) { return formatNumber(d) + " " + units; },
color = d3.scale.category20();
// append the svg canvas to the page
var svg = d3.select("#chart").append("svg")//svg选择id为chart部分
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform",
"translate(" + (margin.left+20) + "," + margin.top + ")");
// Set the sankey diagram properties
var sankey = d3.sankey()
.nodeWidth(nodewidth)//矩形宽度
.nodePadding(10)//矩形垂直距离
.size([width-40, height]);//布局的大小 布满g
var path = sankey.link();
var find_nodecolor=function(d,nodecolor){
nodecolor.forEach(function(f,i){
if(f.Community==d) aa=f.color;
});
return aa;
};
// load the data with d3.csv instead of d3.json
//for another much simpler example uncomment the below
d3.csv("new_data/new_link.csv", function(error, data) {
var nodecolor=[
{
"Community":"1_1",
"color":"#1f77b4"
},
{
"Community":"1_5",
"color":"#ff7f0e"
},
{
"Community":"1_6",
"color":"#98df8a"
},
{
"Community":"1_2",
"color":"#9467bd"
},
{
"Community":"1_10",
"color":"#c49c94"
},
{
"Community":"1_8",
"color":"#f7b6d2&