【D3.js数据可视化系列教程】（三十四）-- sankey图

好多没看懂。先把理解的放着吧

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Sankey Diagram4</title>
<style>#chart {height: 500px;
}.node rect {cursor: move;fill-opacity: .9;shape-rendering: crispEdges;
}.node text {pointer-events: none;text-shadow: 0 1px 0 #fff;
}.link {fill: none;stroke: #000;stroke-opacity: .2;
}.link:hover {stroke-opacity: .5;
}
</style>
</head>
<body>
<link type="text/css" href="http://localhost:8080/spring/css/style.css"  />
<script src="http://localhost:8080/spring/js/d3.v3.js"></script>
<script src="http://localhost:8080/spring/js/sankey.js"></script><p id="chart"><script type="text/javascript">var margin = {top: 1, right: 1, bottom: 6, left: 1},width = 960 - margin.left - margin.right,height = 500 - margin.top - margin.bottom;
//(1)数字格式化函数
var formatNumber = d3.format(",.0f"),//将数字转化为字符串(小数四舍五入)，逗号可以允许使用千分位来分隔,例如：1391.989->1,392//下面只是为提示条的数字格式化format = function(d) { console.log(d+"->"+formatNumber(d));return formatNumber(d) + " TWh"; },//TWh是太瓦时，描述的电量分配的例子，当然用这个单位color = d3.scale.category20();var svg = d3.select("#chart")//ID选择器.append("svg").attr("width", width + margin.left + margin.right).attr("height", height + margin.top + margin.bottom).append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");//(2)生成sankey布局
var sankey = d3.sankey().nodeWidth(15)//每个资源块的水平像素宽度.nodePadding(10)//资源块间的纵向间距.size([width, height]);var path = sankey.link();d3.json("http://localhost:8080/spring/D3data/sankey.json", function(energy) {//(3)sankey加载节点和链接数据sankey.nodes(energy.nodes).links(energy.links).layout(32);//布局均匀化，数值大中间的块就会向下移动，比较均衡
//(4)sankey设置链接属性var link = svg.append("g").selectAll(".link").data(energy.links).enter().append("path").attr("class", "link").attr("d", path)//链接的路径设置已经被sankey封装了，这里调用之后就可以生成连线呢的路径//下面这句生成线的宽度，//线的宽度按照线端点两端块较小者扩宽，但为啥偏移max(1, d.dy）？.style("stroke-width", function(d) { return Math.max(1, d.dy); }).sort(function(a, b) { return b.dy - a.dy; });//这句去掉效果一样不知为啥？
//(5)sankey设置链接提示link.append("title").text(function(d) { return d.source.name + " → " + d.target.name + "\n" + format(d.value); });
//(6)拖动var node = svg.append("g").selectAll(".node").data(energy.nodes).enter().append("g").attr("class", "node").attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }).call(d3.behavior.drag().origin(function(d) { return d; })//拖动行为保存鼠标的位置，并在拖动过程中的启动元件的位置之间的偏移量。如果是空的起源访问，然后设置元素的位置就拖鼠标的位置，这可能会导致对大量元素有明显的跳动.on("dragstart", function() { //这句是什么？this.parentNode.appendChild(this); }).on("drag", dragmove));
//(7)块node.append("rect").attr("height", function(d) { return d.dy; }).attr("width", sankey.nodeWidth())//刚才设置的块的宽度.style("fill", function(d) { return d.color = color(d.name.replace(/ .*/, "")); }).style("stroke", function(d) { return d3.rgb(d.color).darker(2); })//较深.append("title").text(function(d) { return d.name + "\n" + format(d.value); });
//(8)文字node.append("text").attr("x", -6).attr("y", function(d) { return d.dy / 2; }).attr("dy", ".35em").attr("text-anchor", "end")//文字在左边（中轴右边的）.attr("transform", null).text(function(d) { return d.name; }).filter(function(d) { return d.x < width / 2; })//除去在中轴左边的 .attr("x", 6 + sankey.nodeWidth()).attr("text-anchor", "start");//文字在右边
//(9)拖动function dragmove(d) {d3.select(this).attr("transform", "translate(" + d.x + "," + (d.y = //下面的纵坐标调整值是怎么计算的？Math.max(0, Math.min(height - d.dy,d3.event.y))) + ")");sankey.relayout();//重新布局,线上下的位置调整link.attr("d", path);//更新路径}
});
</script></body>

【D3.js数据可视化系列教程】（三十四）-- sankey图相关推荐

【D3.js数据可视化系列教程】（三十六）-- 冰柱图
1. 冰柱图简介冰柱图使用D3的分区布局实现,主要用来展现数据的层次和包含关系.实际上使用笛卡尔排列的分区布局数据绘制的就是冰柱图,径向排列就是旭日图. 下图给出的是笛卡尔排列方式. 2. 冰柱图示 ...
【D3.js数据可视化系列教程】（二十八）--弦图
http://blog.csdn.net/tianxuzhang/article/details/14149681 弦图鼠标悬停效果: (1)指定圆环和玄的数值 [javascript] view ...
c语言数组统计条形图,【D3.js数据可视化系列教程】--（十）更自由的条形图
1. 准备数据绘制条形图的输入数只需要一个表示每个条数据量的数组就行. var dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13,11, 12, 1 ...
《D3.js数据可视化实战手册》——2.5 使用子选择器
本节书摘来异步社区<D3.js数据可视化实战手册>一书中的第2章,第2.5节,作者: [加拿大]Nick Qi Zhu,更多章节内容可以访问云栖社区"异步社区"公众号查 ...
《D3.js数据可视化实战手册》—— 1.1 简介
本节书摘来异步社区<D3.js数据可视化实战手册>一书中的第1章,第1.1节,作者: [加拿大]Nick Qi Zhu,更多章节内容可以访问云栖社区"异步社区"公众号查 ...
实践数据湖iceberg 第三十四课基于数据湖icerberg的流批一体架构-流架构测试
系列文章目录实践数据湖iceberg 第一课入门实践数据湖iceberg 第二课 iceberg基于hadoop的底层数据格式实践数据湖iceberg 第三课在sqlclient中,以sql ...
数据可视化系列（三）：布局格式定方圆
前言期待了好久的datawhale可视化教程终于出来了,这次标题狠有文艺范儿,哈哈哈这次我主要目的是最近要写篇论文,也正好为以后建模画图打劳基础~ 大家可以多看看官方教程: 中文官方网站:http ...
python qt gui与数据可视化编程 kindle_Kindle电子书 – D3.js数据可视化实战手册 azw3...
豆瓣评分:7.0 27人评价简介: 如今这个互联网时代,人们每天都产生海量的数据,如果直接面对这些数据,可能让人无从下手.将数据可视化,用形象立体的形式将其展现,有利于分析其中的关联,攫取可能存在的 ...
【D3.js数据可视化实战】--（3）桑基图（sankey）的绘制
什么是桑基图用D3绘制简单的Sankey图添加文字圆形节点添加交互效果注:本文未经作者允许严禁转载和演绎 1 什么是桑基图? 桑基图是流图 (flow diagram )的一种,用来描述能量 ...

【D3.js数据可视化系列教程】（三十四）-- sankey图

【D3.js数据可视化系列教程】（三十四）-- sankey图相关推荐

最新文章

热门文章