1. घर
  2. सवाल और जवाब
  3. जावास्क्रिप्ट में Sankey आरेख

जावास्क्रिप्ट में Sankey आरेख

2010-12-28 9 views
12

मैं जावास्क्रिप्ट का उपयोग कर Sankey diagram आकर्षित करना चाहता हूं। क्या कोई इस के लिए उपलब्ध एल्गोरिदम या पुस्तकालयों के बारे में कुछ दिशा प्रदान कर सकता है?जावास्क्रिप्ट में Sankey आरेख

स्रोत

2010-12-28 321zeno

+0

संबंधित प्रश्न: http://stats.stackexchange.com/questions/24074/whats-a-good-tool-to-create-sankey-diagrams/24114# 24114 – Thilo

उत्तर

11

यह 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; 
    } 
}

का उपयोग कर एक बुनियादी Sankey आरेख है और मैं इसे इस तरह का उपयोग करें:

<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>

स्रोत

2010-12-28 23:52:56 321zeno

+1

अपडेटेड लिंक: https://dmitrybaranovskiy.github.io/raphael/ – u01jmg3

1

धन्यवाद रास्ते पर मुझे शुरू करने के लिए zenify, मैं से कुछ में बदलाव करना पड़ा इसे काम करने के लिए उपरोक्त कोड कॉपी किया गया है लेकिन यह निश्चित रूप से एक अच्छा प्रारंभिक बिंदु देता है। नीचे दिया गया कोड एक .htm फ़ाइल में कॉपी किया जा सकता है और इसके लिए आपको उसी निर्देशिका में रैफेल-min.js को काम करने की आवश्यकता है।

सादर/कोम

<!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>

स्रोत

2010-12-30 12:20:56

+0

यह बढ़िया है! अब क्या आपके पास कोई विचार है कि बनाए गए आरेखों को किसी छवि प्रारूप में कैसे निर्यात किया जा सकता है जिसे उपयोगकर्ता द्वारा सहेजा जा सकता है? – 321zeno

+0

हम्म, यह पल के लिए मेरे बाहर है। फिलहाल मैं एक jquery प्लगइन के विचार के बारे में सोच रहा हूं जो डेटा की एक HTML तालिका पर कार्य करता है जहां आप तालिका आईडी इनपुट करते हैं, डेटा कॉलम और शीर्षक कॉलम प्लगइन में इनपुट करते हैं। सपना यह है कि यह संकी उत्पन्न करता है और तालिका को विस्तारित करता है ताकि आप विभिन्न मूल्यों को गतिशील रूप से पुन: व्यवस्थित कर सकें, तीर के कोण/लंबाई और दस लाख अन्य चीजों को सेट कर सकें। –

9

मामले में दूसरों के लिए उपयोगी: मैं यहाँ मेरी जावास्क्रिप्ट Sankey आरेख ड्राइंग कोड निकाला है:

http://tamc.github.com/Sankey/

मूल उपयोग इस ब्रिटेन सरकार साइट पर है :

http://2050-calculator-tool.decc.gov.uk/pathways/2022222122222103332220023211022330220130233022012/sankey

स्रोत

2011-07-14 14:01:05

2

यहाँ कैसे माइक Bostock के डी 3 आधारित Sankey आरेख कोड काम करता है के एक काफी विस्तृत विवरण है: http://www.d3noob.org/2013/02/sankey-diagrams-description-of-d3js-code.html

मैं एक Grails आधारित अनुप्रयोग सर्वर पर इस को लागू किया है और यह काम करता है।

स्रोत

2013-08-05 22:27:30 Aml

संबंधित मुद्दे

 संबंधित मुद्दे