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ác vấn đề liên quan
- 1. Biểu đồ Sankey bằng Python
- 2. d3.js Biểu đồ Sankey: hình chữ nhật tô màu
- 3. Clojurescript, JavaScript, SVG, Biểu đồ, Đồ họa
- 4. Tạo biểu đồ SVG trong JavaScript
- 5. Hiển thị biểu đồ mạng JavaScript
- 6. Thư viện javascript để tạo biểu đồ
- 7. Thư viện truyền tải biểu đồ JavaScript
- 8. Thời gian biểu đồ thị của biểu đồ trong Python
- 9. Biểu đồ Hiển thị Biểu đồ Google Pie
- 10. javascript amChart sự kiện nhấp vào mục biểu đồ
- 11. tìm kiếm thư viện biểu đồ javascript đáp ứng
- 12. Biểu đồ dạng động JavaScript với nhiều điểm (~ 500.000)
- 13. Biểu thị biểu đồ trong clojure
- 14. Làm cách nào để đọc biểu đồ javascript này?
- 15. Có thư viện javascript để tạo biểu đồ không?
- 16. Biểu đồ bong bóng Javascript với thanh trượt
- 17. Thư viện biểu đồ JavaScript - Kiểu Google Analytics
- 18. Tạo biểu đồ trong java
- 19. Biểu đồ lô trong Highcharts
- 20. Biểu đồ lôgarít trong FLOT
- 21. Lưu biểu đồ trong Haskell
- 22. Biểu đồ trong Gtk/Gtk #
- 23. Các khung Javascript/Flash tốt nhất để hiển thị biểu đồ hoặc biểu đồ từ dữ liệu là gì?
- 24. Đồ họa vector trong Javascript?
- 25. javascript vẽ đồ thư viện
- 26. Biểu đồ kiểu dữ liệu biểu đồ Haskell
- 27. Biểu đồ/Biểu đồ Cam kết của Mercurial
- 28. Highcharts donut biểu đồ tùy
- 29. biểu đồ tổ chức biểu đồ tam giác
- 30. sao chép biểu đồ (adjacency_list) sang một biểu đồ khác
câu hỏi liên quan: http://stats.stackexchange.com/questions/24074/whats-a-good-tool-to-create-sankey-diagrams/24114# 24114 – Thilo