基于sankey图制作的社区变动图

最新推荐文章于 2024-04-26 16:47:03 发布

VIP文章空城_招Python数据处理

最新推荐文章于 2024-04-26 16:47:03 发布

阅读量2.3k

点赞数

分类专栏： data visualization—d3.js/R 文章标签： javascript sankey d3.js

本文链接：https://blog.csdn.net/huozi07/article/details/45310413

版权

基于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&

最低0.47元/天解锁文章

空城_招Python数据处理

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
基于sankey图制作的社区变动图

基于sankey图制作了一个社区成员变迁图，矩形与link上的文字均可以经过拖动改变位置。代码运行结果：javascript源码：Sankey Prototype text{ display:block; } .link { fill: none; stroke: #18c0ff;
复制链接

扫一扫