12
Tôi muốn vẽ một Sankey diagram bằng Javascript. Bất cứ ai có thể cung cấp một số hướng về các thuật toán hoặc thư viện có sẵn cho điều này?Biểu đồ Sankey trong javascript
A
Trả lời
11
Đây là một sơ đồ Sankey cơ bản sử dụng raphaeljs
function Sankey(x0, y0, height, losses) {
var initialcolor = Raphael.getColor();
var start = x0 + 200;
var level = y0 + height;
var heightunit = height/100;
var remaining = 100 * heightunit;
function drawloss(start, level, loss) {
var thecolor = Raphael.getColor();
paper.path("M" + (start - 100) + "," + (level - loss) + "L" + start + "," + (level - loss)).attr({stroke: thecolor});
paper.path("M" + (start - 100) + "," + level + "L" + start + "," + level).attr({stroke: thecolor});
paper.path("M " + start + "," + level + " Q" + (start + 100) + "," + level + " " + (start + 100) + "," + (level + 100)).attr({stroke: thecolor});
paper.path("M " + start + "," + (level - loss) + " Q" + (start + 100 + loss) + "," + (level - loss) + " " + (start + 100 + loss) + "," + (level + 100)).attr({stroke: thecolor});
paper.path("M " + (start + 100) + "," + (level + 100) + " L " + (start - 10 + 100) + "," + (level + 100) + " L " + (start + loss/2 + 100) + "," + (level + 110) + " L " + (start + loss + 10 + 100) + "," + (level + 100) + " L " + (start + loss + 100) + ", " + (level + 100)).attr({stroke: thecolor});
}
function drawremaining(start, level, loss) {
paper.path("M 100," + y0 + "L" + (start + 100) + "," + y0).attr({stroke: initialcolor});
paper.path("M" + (start - 100) + "," + level + "L" + (start + 100) + "," + level).attr({stroke: initialcolor});
paper.path("M " + (start + 100) + " " + y0 + " L " + (start + 100) + " " + (y0 - 10) + " L " + (start + 110) + " " + (y0 + loss/2) + " L " + (start + 100) + " " + (level + 10) + " L " + (start + 100) + " " + level).attr({stroke: initialcolor});
}
function drawstart(x0, y0, width, height) {
paper.path("M " + x0 + "," + y0 + "L" + (x0 + width) + "," + y0).attr({stroke: initialcolor});
paper.path("M " + x0 + "," + (y0 + height) + "L" + (x0 + width) + "," + y0 + height)).attr({stroke: initialcolor});
paper.path("M " + x0 + "," + y0 + "L" + x0 + "," + (y0 + height)).attr({stroke: initialcolor});
}
drawstart(x0, y0, 100, height);
for (var i in losses) {
drawloss(start, level, losses[i] * heightunit);
remaining -= losses[i] * heightunit;
level -= losses[i] * heightunit;
start += 100;
}
}
Và tôi sử dụng nó như thế này:
<div id="notepad" style="height:1000px; width:1000px; background: #eee"></div>
<script type="text/javascript">
var paper = Raphael(document.getElementById("notepad"), 1020, 1000);
var losses=[50, 30, 5];
Sankey(10, 100, 200, losses);
</script>
+1
Cập nhật liên kết: https://dmitrybaranovskiy.github.io/raphael/ – u01jmg3
1
Nhờ zenify để bắt đầu cho tôi trên con đường, tôi phải rejig một số sao chép mã ở trên để có được nó để làm việc nhưng nó chắc chắn cho một điểm khởi đầu tốt. Mã dưới đây có thể được sao chép vào một tệp .htm và bạn chỉ cần có raphael-min.js trong cùng một thư mục để nó hoạt động.
Trân/Colm
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" class="JS">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Raphael makes Sankey</title>
<script type="text/javascript" src="raphael-min.js"></script>
<script type="text/javascript">
function Sankey(x0,y0,height,losses){
initialcolor= Raphael.getColor();
var start=x0+200;
var level=y0+height;
var heightunit=height/100;
var remaining=100*heightunit;
function drawloss(start,level,loss){
var thecolor=Raphael.getColor();
paper.path("M"+(start-100)+","+(level-loss)+"L"+start+","+(level-loss)).attr({stroke: thecolor});
paper.path("M"+(start-100)+","+(level)+"L"+start+","+(level)).attr({stroke: thecolor});
paper.path("M "+start+","+level+" Q"+(start+100)+","+level+" "+(start+100)+","+(level+100)).attr({stroke: thecolor});
paper.path("M "+start+","+(level-loss)+" Q"+(start+100+loss)+","+(level-loss)+" "+(start+100+loss)+","+(level+100)).attr({stroke: thecolor});
paper.path("M "+(start+100)+","+(level+100)+" L "+(start-10+100)+","+(level+100)+" L "+(start+(loss/2)+100)+","+(level+110)+" L "+(start+(loss)+10+100)+","+(level+100)+" L "+(start+(loss)+100)+", "+(level+100)).attr({stroke: thecolor});
}
function drawremaining(start,level,loss){
paper.path("M 100,"+y0+"L"+(start+100)+","+y0).attr({stroke: initialcolor});
paper.path("M"+(start-100)+","+(level)+"L"+(start+100)+","+(level)).attr({stroke: initialcolor});
paper.path("M "+(start+100)+" "+y0+" L "+(start+100)+" "+(y0-10)+" L "+(start+110)+" "+(y0+(loss/2))+" L "+(start+100)+" "+(level+10)+" L "+(start+100)+" "+(level)).attr({stroke: initialcolor});
}
function drawstart(x0, y0, width, height){
paper.path("M "+x0+","+y0+"L"+(x0+width)+","+y0+"").attr({stroke: initialcolor});
paper.path("M "+x0+","+(y0+height)+"L"+(x0+width)+","+y0+height+"").attr({stroke: initialcolor});
paper.path("M "+x0+","+y0+"L"+x0+","+(y0+height)+"").attr({stroke: initialcolor});
}
drawstart(x0,y0,100,height);
for (var i in losses){
drawloss(start,level,losses[i]*heightunit);
remaining-=losses[i]*heightunit;
level-=losses[i]*heightunit;
start+=100;
}
drawremaining(start, level, remaining);
}
</script>
</head>
<body id="blog">
<div id="notepad" style="height:1000px; width:1000px; background: #eee"></div>
<script type="text/javascript">
var paper = Raphael(document.getElementById("notepad"), 1020, 1000);
var losses=[50, 30, 5];
Sankey(10, 100, 200, losses);
</script>
</body>
</html>
+0
Thật tuyệt vời! Bây giờ bạn có bất kỳ ý tưởng nào về cách các sơ đồ được tạo có thể được xuất sang định dạng hình ảnh mà người dùng có thể lưu không? – 321zeno
+0
Hmm, đó là vượt ra ngoài tôi cho thời điểm này. Hiện tại tôi đang nghĩ đến ý tưởng về một plugin jquery hoạt động trên một bảng dữ liệu html, nơi bạn nhập id bảng, cột dữ liệu và cột tiêu đề vào plugin. Giấc mơ là nó tạo ra sankey và cũng mở rộng bảng để cho phép bạn tự động sắp xếp lại các giá trị khác nhau, đặt góc/chiều dài của mũi tên và một triệu thứ khác. –
9
Trong trường hợp có ích cho người khác: Tôi đã trích javascript Sankey đang sơ đồ bản vẽ của tôi ở đây:
http://tamc.github.com/Sankey/
Việc sử dụng ban đầu là trên trang web của chính phủ Anh này :
6
D3.js sử dụng một plugin để tạo sơ đồ sankey khá tốt.
2
Dưới đây là một lời giải thích khá chi tiết về cách mã Sankey sơ đồ D3-based Mike Bostock của hoạt động: http://www.d3noob.org/2013/02/sankey-diagrams-description-of-d3js-code.html
Tôi đã thực hiện điều này trên một máy chủ ứng dụng Grails dựa trên và nó hoạt động.
2
Charts Google bao gồm Sơ đồ Sankey: https://developers.google.com/chart/interactive/docs/gallery/sankey
câu hỏi liên quan: http://stats.stackexchange.com/questions/24074/whats-a-good-tool-to-create-sankey-diagrams/24114# 24114 – Thilo