d3js - एस्टरप्लॉट-जैसे चार्ट बनाना (उदाहरण शामिल)

मैं d3js के लिए नया हूं, लेकिन जावास्क्रिप्ट और डेटा-विज़ुअलाइज़ेशन के सिद्धांतों से परिचित हूं।d3js - एस्टरप्लॉट-जैसे चार्ट बनाना (उदाहरण शामिल)

मैंने एस्टर प्लॉट आरेख का उपयोग करके डेटा के 2 आयामों को देखने के लिए प्रभाव प्राप्त करने का प्रयास किया है, लेकिन वास्तव में यह चीज़ अपेक्षित काम करने के लिए नहीं मिल सकती है।

संलग्न आपको वह चित्र मिलेगा जिसे मैं फिर से बनाने की कोशिश कर रहा हूं और मेरा उदाहरण कोड। यह बहुत बड़ा होगा अगर आप मुझे बता सकें कि इसे कैसे काम करना है - या इसे अनुकूलित कैसे करें! :)

D3JS - Aster Plot Preview

यह वह जगह है मैं डेटा कैसे सोचते हैं और कैसा दिखना चाहिए .. थोड़े .. (छद्म कोड भेजे ..)

डाटा उदाहरण:

var testData = { 
     maxPoints: 10, 
     color: '#bababa', 
     border: { 
     width: 1, 
     color: '#ffffff' 
     }, 
     items: [ 
     { 
      name: 'Looks', 
      color: '#2976dd', 
      weight: 0.37, 
      points: 8 
     },{ 
      name: 'Charm', 
      color: '#87bd24', 
      weight: 0.03, 
      points: 5 
     },{ 
      name: 'Honesty', 
      color: '#406900', 
      weight: 0.16, 
      points: 7 
     },{ 
      name: 'Humour', 
      color: '#ffb200', 
      weight: 0.31, 
      points: 9 
     },{ 
      name: 'Intelligence', 
      color: '#f78200', 
      weight: 0.12, 
      points: 0 
     } 
     ] 
    };

कोड उदाहरण:

var archs = []; 
    // Loop through each item 
    var circleRadius = 400; 
    var innerRadius = 100; 

    var startAngle = 0; 
    var endAngle = 0; 
    for (var i = 0; i < testData.items.length; i++) { 
    // Draw each arch 
    var maxPoints = testData.maxPoints; 
    var archHeight = (circleRadius - innerRadius)/maxPoints; 
    var startRadius = innerRadius; 

    endAngle += testData.items[i].weight; 

    for (var j = 0; j < maxPoints; j++) { 
     var color = testData.color; 
     // draw arch - don't know how to colorize accordingly.. 
     if (testData.items[i].points < j) { 
     // color this arc somehow.. 
     color = testData.items[i].color; 
     } 

     d3.svg.arc() 
     .startAngle(startAngle) 
     .endAngle(endAngle) 
     .innerRadius(startRadius) 
     .outerRadius(startRadius+archHeight); 

     // Increase startRadius 
     startRadius += archHeight; 
    } 

    // Increase startAngle 
    startAngle = endAngle; 
    }

किसी भी तरह मेरा कोड रास्ता अधिक जटिल दिखता है .. हालांकि यह अभी भी छद्म कोड है .. मैं अभी भी संघर्ष कर रहा हूं .. अगर कोई मुझे संकेत देने के लिए संकेत या कुछ कामकाजी कोड दे सकता है तो मैं बहुत आभारी रहूंगा!

अग्रिम धन्यवाद - क्रिस

स्रोत

2016-02-15 Christian Wisniewski

आप को देखा है इस एक: http://bl.ocks.org/bbest/2de0e25d4840c68f2db1? यदि हां, तो आप इसे आधार के रूप में उपयोग करने से कैसे रोकेंगे? – Arthur

अरे - मैंने यह कोड देखा है! मुझे अभी भी डी 3 जेएस तर्क के कुछ pricinples याद आ रही है .. एक और तरीका सांद्रिक पाई/डोनू-चार्ट बनाने और बाहरी त्रिज्या को कम करने के लिए होगा .. लेकिन मैंने सोचा कि मेरा रास्ता कानूनी भी होगा। एस्टरप्लॉट के साथ समस्या: मुझे छवि उदाहरण में ग्रिड व्यू खींचने की ज़रूरत है - यही कारण है कि मुझे कुछ लूपिंग-जादू बनाना होगा:/ –

ठीक है, मुझे कुछ समय लगता है जब मुझे कुछ समय लगता है – Arthur

यहां एक त्वरित कार्यान्वयन जो अपने आरेख प्रतिकृति है। यह अनिवार्य रूप गाढ़ा डोनट वजन और फिर रंग स्लाइस पर आधारित चार्ट बनाता अंक के आधार पर:

<!DOCTYPE html> 
 
<meta charset="utf-8"> 
 
<style> 
 
    .arc path { 
 
    stroke: #fff; 
 
    } 
 
</style> 
 

 
<body> 
 
    <script src="//d3js.org/d3.v3.min.js"></script> 
 
    <script> 
 
    var testData = { 
 
     maxPoints: 10, 
 
     color: '#bababa', 
 
     border: { 
 
     width: 1, 
 
     color: '#ffffff' 
 
     }, 
 
     items: [{ 
 
     name: 'Looks', 
 
     color: '#2976dd', 
 
     weight: 0.37, 
 
     points: 8 
 
     }, { 
 
     name: 'Charm', 
 
     color: '#87bd24', 
 
     weight: 0.03, 
 
     points: 5 
 
     }, { 
 
     name: 'Honesty', 
 
     color: '#406900', 
 
     weight: 0.16, 
 
     points: 7 
 
     }, { 
 
     name: 'Humour', 
 
     color: '#ffb200', 
 
     weight: 0.31, 
 
     points: 9 
 
     }, { 
 
     name: 'Intelligence', 
 
     color: '#f78200', 
 
     weight: 0.12, 
 
     points: 0 
 
     }] 
 
    }; 
 

 
    var width = 500, 
 
     height = 500; 
 
     color = d3.scale.category20(); 
 
    
 
    // inner radius 
 
    var iR = 75, 
 
    // radius of each concentric arc 
 
     r = ((Math.min(width, height)/2) - iR)/testData.maxPoints; 
 
     
 
    var pie = d3.layout.pie() 
 
     .sort(null) 
 
     .value(function(d) { 
 
     return d.weight; 
 
     }) 
 
     .padAngle(.01); 
 

 
    var svg = d3.select("body").append("svg") 
 
    .attr("width", width) 
 
    .attr("height", height) 
 
    .append("g") 
 
    .attr("transform", "translate(" + width/2 + "," + height/2 + ")"); 
 

 
    var g = svg.selectAll(".arc") 
 
     .data(pie(testData.items)) 
 
     .enter().append("g") 
 
     .attr("class", "arc"); 
 

 
    // iterate our number of rings 
 
    d3.range(testData.maxPoints) 
 
     .forEach(function(i){ 
 
     
 
     // generate an arc 
 
     var arc = d3.svg.arc() 
 
      .outerRadius(r * (i + 1) + iR) 
 
      .innerRadius(r * i + iR); 
 
     
 
     // fill it, if appropriate 
 
     g.append("path") 
 
      .attr("d", arc) 
 
      .style("fill", function(d) { 
 
      if (i < d.data.points) 
 
       return color(d.data.name); 
 
      else 
 
       return "#eee" 
 
      }); 
 
    }); 
 

 
    </script>

स्रोत

2016-02-16 01:36:09 Mark

वाह!! बहुत धन्यवाद! मैं आपका कोड देख रहा हूं .. मैंने इसे इस तरह से करने की कोशिश की है। –

d3js - एस्टरप्लॉट-जैसे चार्ट बनाना (उदाहरण शामिल)

उत्तर

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