d3-sankey 桑基图数据量过大的情况下页面混乱
程序员文章站
2022-05-25 21:16:28
...
项目中需要使用桑基图的图表，对比百度的echarts和d3.js中的桑基图的例子，抱着学习的态度，选用了d3.js (version 4).
废话不多说，直接上代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Sankey</title>
<style>
body {
padding: 10px;
min-width: 600px;
max-width: 1200px;
margin: auto;
-moz-user-select: none;
-webkit-user-select: none;
}
#chart {
height: 500px;
font: 13px sans-serif;
}
.chart-sankey {
background: #fff;
box-shadow: 2px 5px 6px rgba(0, 0, 0, 0.5);
}
.node rect {
fill-opacity: .9;
shape-rendering: crispEdges;
stroke-width: 0;
cursor: move;
}
.node text {
text-shadow: 0 1px 0 #fff;
}
.link {
fill: none;
stroke: #ddd;
stroke-opacity: 0.5;
cursor: pointer;
}
.link title {
visibility: hidden;
}
.link:hover {
/*stroke-opacity: 1;*/
}
.link:hover title{
visibility: visible;
}
.tooltip {
position: absolute;
padding: 8px 10px;
background: rgba(255, 255, 255, 0.8);
border-radius: 3px;
pointer-events: none;
max-width: 200px;
display: none;
box-shadow: 1px 3px 4px rgba(0, 0, 0, 0.3);
line-height: 1.2;
font-size: 12px;
}
</style>
<script src="../src/d3/d3.min.js"></script>
<script src="../src/d3-sankey/d3-sankey.js"></script>
</head>
<body>
<div id="chart">
<div id="tooltip" class="tooltip"></div>
</div>
<script>
var margin = {top: 1, right: 1, bottom: 6, left: 1},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var timer;
var formatNumber = d3.format(",.0f"), //decimal places
format = function(d) { return formatNumber(d) + " TWh"; },
color = d3.scaleOrdinal(d3.schemeCategory20);
var svg = d3.select("#chart").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 + ")");
var sankey = d3.sankey()
.nodeWidth(30)
.nodePadding(10)
.size([width, height]);
var path = sankey.link();
var toolTips = document.getElementById('tooltip');
var mouseHas = false
var energy= {
nodes: [
{
name: "加入购物车",
value: 3
},
{
name: "下单",
value: 2
},
{
name:"付款",
value:2
},
{
name:"加入购物车",
value:3
},
{
name:"下单",
value:5
},
{
name:"付款",
value:3
},
{
name:"收货",
value:2
},
{
name:"下单",
value:2
},
{
name:"付款",
value:8
},
{
name:"申请退款",
value:1
},
{
name:"收货",
value:1
},
{
name:"加入购物车",
value:1
},
{
name:"付款",
value:4
},
{
name:"收货",
value:3
},
{
name:"付款",
value:1
},
{
name:"申请退款",
value:3
},
{
name:"收货",
value:7
},
{
name:"退货",
value:2
},
{
name:"收货",
value:1
}
],
links: [
{
source:5,
target:10,
value:1
},
{
source:2,
target:6,
value:2
},
{
source:1,
target:5,
value:2
},
{
source:8,
target:16,
value:4
},
{
source:3,
target:8,
value:2
},
{
source:7,
target:12,
value:2
},
{
source:8,
target:13,
value:2
},
{
source:3,
target:7,
value:1
},
{
source:12,
target:15,
value:1
},
{
source:5,
target:13,
value:1
},
{
source:13,
target:17,
value:1
},
{
source:0,
target:5,
value:1
},
{
source:14,
target:18,
value:1
},
{
source:11,
target:14,
value:1
},
{
source:10,
target:17,
value:1
},
{
source:8,
target:15,
value:2
},
{
source:0,
target:4,
value:2
},
{
source:12,
target:16,
value:3
},
{
source:4,
target:8,
value:5
},
{
source:5,
target:9,
value:1
}
]
}
sankey
.nodes(energy.nodes)
.links(energy.links)
.layout(32);
// 设置 link
var link = svg.append("g").selectAll(".link")
.data(energy.links)
.enter().append("path")
.attr("class", "link")
.attr("d", path)
.style("stroke-width", function(d) { return Math.max(1, d.dy); })
.sort(function(a, b) {
return b.dy - a.dy;
})
.on('mouseover', function (d) {
var coordinates = [0, 0];
coordinates = d3.mouse(this);
var x = coordinates[0];
var y = coordinates[1];
toolTips.innerHTML= d.source.name + "->" + d.target.name + "<br/>" + format(d.value);
toolTips.style.display = 'block'
toolTips.style.top = (y - 20) + 'px'
toolTips.style.left = (x + 100) + 'px'
// tip.show(d)
})
.on('mousemove', function (d) {
var coordinates = [0, 0];
coordinates = d3.mouse(this);
var x = coordinates[0];
var y = coordinates[1];
toolTips.innerHTML= d.source.name + "->" + d.target.name + "<br/>" + format(d.value);
toolTips.style.display = 'block'
toolTips.style.top = (y - 20) + 'px'
toolTips.style.left = (x + 50) + 'px'
// tip.show(d)
})
.on('mouseout', function (d, e) {
var evt = window.event || e;
mouseHas = false
var obj=evt.toElement||evt.relatedTarget;
var pa=this;
if(pa.contains(obj)) return false;
toolTips.style.display = 'none'
// tip.show(d)
})
// 设置node
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.drag()
.subject(function(d) {
return d;
})
.on("start", function() {
this.parentNode.appendChild(this);
})
.on("drag", dragmove));
node.append("rect")
.attr("height", function(d) { return d.dy; })
.attr("width", sankey.nodeWidth())
.style("fill", function(d) { return d.color = color(d.name.split("|")[0]); })
.style("stroke", function(d) { return d3.rgb(d.color).darker(2); })
.append("title")
.text(function(d) { return d.name + "\n" + format(d.value); });
node.append("text")
.attr("x", -6)
.attr("y", function(d) { return d.dy / 2; })
.attr("dy", ".35em")
.attr("text-anchor", "end")
.attr("transform", null)
.style("fill", "#666")
.text(function(d) { return d.name; })
.filter(function(d) { return d.x < width / 2; })
.attr("x", 6 + sankey.nodeWidth())
.attr("text-anchor", "start");
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>
</html>
代码中大多是官网上的例子，只是加了个提示框的跟随鼠标移动的提示框。
说说遇到的问题吧
问题1： 鼠标放到每个link上，如何使相应的 link 颜色加深
// css 样式中是这么写的
.link {
fill: none;
stroke: #ddd;
stroke-opacity: 0.5;
cursor: pointer;
}
.link title {
visibility: hidden;
}
.link:hover {
stroke-opacity: 1;
}
// 加了鼠标事件后发现这个hover效果不好用了，需求时间紧，没办法，简单粗暴，好用就行。
// 所以在鼠标mouseover 、mousemove、mouseout事件中修改了，代码如下
.on('mouseover', function (d) {
d3.select(this).style("stroke-opacity", "1")
.......
})
.on('mousemove', function (d) {
d3.select(this).style("stroke-opacity", "1")
.......
})
.on('mouseout', function (d) {
d3.select(this).style("stroke-opacity", "0.5")
.......
})
问题2： 例子中的测试数据量大小，开发中用大数据测试的时候发现页面全乱了。
数据量大的时候页面会报错
Error: <rect> attribute height: A negative value is not valid
*答案链接：http://*.com/questions/40579174/large-data-set-breaks-d3-sankey-diagram/40581444#40581444
google和baidu的一些参考资料：
- https://github.com/d3/d3 d3.js github地址
- https://github.com/d3/d3-sankey D3 桑基图插件
- https://github.com/d3/d3/blob/master/API.md#dragging-d3-drag D3 api插件
- https://bl.ocks.org/xaranke/9ada4c74a87b57ae7308 D3 桑基图官方demo
- https://github.com/tianxuzhang/d3.v4-API-Translation D3最新版本(version 4) 中文文档
- http://blog.csdn.net/tianxuzhang/article/details/49624701 博客园
- https://yq.aliyun.com/articles/72335 d3数据的"更新" 和 "退出" （阿里云栖社区）
上一篇： 学习笔记21.07.14：桑基图组合
下一篇： HashMap原理分析