d3.js
कोर SVG अवधारणाओं का उपयोग D3.js विज़ुअलाइज़ेशन में किया जाता है

समन्वय प्रणाली

एक सामान्य गणितीय समन्वय प्रणाली में, बिंदु x = 0, y = 0 ग्राफ के निचले बाएँ कोने पर है। लेकिन एसवीजी समन्वय प्रणाली में, यह (0,0) बिंदु 'कैनवास' के ऊपरी बाएँ कोने में है, यह सीएसएस के समान है जब आप स्थिति को पूर्ण / ठीक करने के लिए निर्दिष्ट करते हैं और नियंत्रण के लिए शीर्ष और बाएँ का उपयोग करते हैं तत्व का सटीक बिंदु।

यह ध्यान रखना आवश्यक है कि जैसे ही एसवीजी में y बढ़ता है, आकृतियाँ नीचे जाती हैं।

मान लीजिए कि हम कुल्हाड़ी मूल्य और y मान के लिए प्रत्येक बिंदु संवाददाता के साथ एक स्क्रैपप्लेट बनाने जा रहे हैं। मान को स्केल करने के लिए, हमें इस तरह डोमेन और रेंज सेट करने की आवश्यकता है:

d3.svg.scale()
  .range([0, height])
  .domain([0,max])

हालांकि, यदि आप इस तरह की सेटिंग रखते हैं, तो अंक नीचे की क्षैतिज रेखा के बजाय शीर्ष क्षैतिज किनारे पर आधारित होंगे, जैसा कि हम उम्मीद करते हैं।

D3 के बारे में अच्छी बात यह है कि आप इसे डोमेन सेटिंग में एक साधारण समायोजन द्वारा आसानी से बदल सकते हैं:

d3.scale.linear()
  .range([height, 0])
  .domain([0, max])

उपरोक्त कोड के साथ, डोमेन का शून्य बिंदु एसवीजी की ऊंचाई के अनुरूप है, जो कि दर्शक की आंखों में चार्ट की निचली रेखा है, इस बीच, स्रोत डेटा का अधिकतम मूल्य एसवीजी के शून्य बिंदु के अनुरूप होगा। समन्वय प्रणाली, जो दर्शकों के लिए अधिकतम मूल्य है।

तत्त्व

<rect> आयत का प्रतिनिधित्व करता है, स्ट्रोक और भराव जैसे सौंदर्य गुणों के अलावा, आयत को स्थान और आकार से परिभाषित किया जाएगा।

स्थान के लिए, यह x और y विशेषताओं द्वारा निर्धारित किया जाता है। स्थान आयत के माता-पिता के सापेक्ष है। और यदि आप x या y विशेषता निर्दिष्ट नहीं करते हैं, तो मूल तत्व के सापेक्ष डिफ़ॉल्ट 0 होगा।

आपके द्वारा स्थान निर्दिष्ट करने के बाद, या इसके बजाय 'प्रारंभ का बिंदु' होने पर, अगली बात आकार निर्दिष्ट करने के लिए है, जो कि आवश्यक है यदि आप वास्तव में कैनवास पर sth आकर्षित करना चाहते हैं, तो यह कहना है, यदि आप नहीं आकार विशेषताएँ निर्दिष्ट करें या मान 0 के रूप में सेट है, आपको कैनवास पर कुछ भी दिखाई नहीं देगा।

केस: बार चार्ट

पहले परिदृश्य के साथ जारी रखें, y कुल्हाड़ियों, लेकिन इस बार, चलो एक बार चार्ट बनाने की कोशिश करते हैं।

Y स्केल सेटिंग को समान मानते हुए, y अक्ष को ठीक से सेट किया गया है, स्कैल्पलॉट और इस बार चार्ट के बीच एकमात्र अंतर यह है कि, हमें चौड़ाई और ऊंचाई, विशेष रूप से ऊंचाई निर्दिष्ट करने की आवश्यकता है। अधिक विशिष्ट होने के लिए, हमने पहले से ही 'शुरुआती बिंदु' प्राप्त कर लिया है, बाकी चीजों को ऊंचाई के लिए उपयोग करना है:

.attr("height", function(d){
  return (height - yScale(d.value))
})

<svg> तत्व मूल तत्व है, या कैनवास जैसा कि हम उस पर चार्ट बना रहे हैं।

एसवीजी तत्वों को एक दूसरे के अंदर घोंसला बनाया जा सकता है, और इस तरह, एसवीजी आकृतियों को एक साथ समूहीकृत किया जा सकता है, इस बीच, एक तत्व के अंदर नेस्टेड सभी आकार इसके संलग्न तत्व के सापेक्ष तैनात किए जाएंगे।

एक बात का उल्लेख करने की आवश्यकता हो सकती है, हम दूसरे के अंदर घोंसला नहीं बना सकते, यह काम नहीं करेगा।

केस: कई चार्ट

उदाहरण के लिए, यह एकाधिक डोनट्स चार्ट कई तत्वों द्वारा बनाया गया है, जिसमें क्रमशः डोनट चार्ट होता है। यह तत्व का उपयोग करके प्राप्त किया जा सकता है, लेकिन इस मामले में जहां हम केवल डोनट चार्ट को एक-दूसरे के बगल में रखना चाहते हैं, अधिक सुविधाजनक है।

एक बात को ध्यान में रखना है कि हम ट्रांसफॉर्मेशन विशेषता का उपयोग नहीं कर सकते हैं, फिर भी हम स्थिति के लिए x, y का उपयोग कर सकते हैं।

तत्त्व

एसवीजी वर्तमान में ऑटोमैटिक लाइन ब्रेक या वर्ड रैपिंग का समर्थन नहीं करता है, तभी बचाव की बात आती है। तत्व पाठ की नई पंक्तियों को पाठ की पिछली पंक्ति के संबंध में बताता है। और इनमें से प्रत्येक स्पैन के भीतर dx या डाई का उपयोग करके, हम शब्द को उसके पहले शब्द के संबंध में स्थिति दे सकते हैं।

केस: एक्सिस पर एनोटेशन

उदाहरण के लिए, जब हम y कुल्हाड़ी पर एक एनोटेशन जोड़ना चाहते हैं:

svg.append("g")
  .attr("class", "y axis")
  .call(yAxis)
.append("text")
  .attr("transform", "rotate(-90)")
  .attr("y", 6)
  .attr("dy", ".71em")
  .style("text-anchor", "end")
  .text("Temperature (ºF)");

एसवीजी तत्व को सही ढंग से जोड़ना

यह एक अपेक्षाकृत आम गलती है: आप एक बनाया rect उदाहरण के लिए एक बार चार्ट में तत्व, है, और आप एक पाठ लेबल (आइए कहते हैं, कि बार का मूल्य) जोड़ना चाहते हैं। इसलिए, उसी वेरिएबल का उपयोग करना जिसे आप rect को जोड़ते थे और इसकी x और y स्थिति को परिभाषित करते थे, आप अपने text एलिमेंट को जोड़ते हैं। बहुत तर्क, आप सोच सकते हैं। लेकिन यह काम नहीं करेगा।

यह गलती कैसे होती है?

आइए एक ठोस उदाहरण देखते हैं, एक बार चार्ट बनाने के लिए एक बहुत ही बुनियादी कोड ( यहाँ पर फ़ेडल ):

var data = [210, 36, 322, 59, 123, 350, 290];

var width = 400, height = 300;

var svg = d3.select("body")
    .append("svg")
    .attr("width", width)
    .attr("height", height);

var bars = svg.selectAll(".myBars")
    .data(data)
    .enter()
    .append("rect");

bars.attr("x", 10)
    .attr("y", function(d,i){ return 10 + i*40})
    .attr("width", function(d){ return d})
    .attr("height", 30);

जो हमें यह परिणाम देता है:

लेकिन आप कुछ पाठ तत्वों को जोड़ना चाहते हैं, शायद प्रत्येक बार के लिए एक सरल मूल्य। तो, आप ऐसा करते हैं:

bars.append("text")
   .attr("x", 10)
   .attr("y", function(d,i){ return 10 + i*40})
   .text(function(d){ return d});

और, आवाज: कुछ नहीं होता है! यदि आप इसे संदेह करते हैं, तो यहां फिडेल है ।

"लेकिन मैं टैग देख रहा हूँ!"

यदि आप इस अंतिम कोड द्वारा निर्मित SVG का निरीक्षण करते हैं, तो आप इसे देखने वाले हैं:

और इस बिंदु पर बहुत से लोग कहते हैं: "लेकिन मैं पाठ टैग देख रहा हूं, यह संलग्न है!"। हाँ, यह है, लेकिन इसका मतलब यह नहीं है कि यह काम करेगा। आप कुछ भी जोड़ सकते हैं ! इसे देखें, उदाहरण के लिए:

svg.append("crazyTag");

यह आपको यह परिणाम देगा:

<svg>
    <crazyTag></crazyTag>
</svg>

लेकिन आप किसी भी परिणाम की उम्मीद नहीं करते हैं क्योंकि टैग वहाँ है, क्या आप?

एसवीजी तत्वों को सही तरीके से लागू करें

जानें कि एसवीजी तत्व बच्चों को क्या पकड़ सकते हैं, विनिर्देशों को पढ़कर। हमारे पिछले उदाहरण में, कोड वजह से नहीं काम करता है rect तत्वों को शामिल नहीं कर सकते हैं text तत्वों। तो, हमारे ग्रंथों को कैसे प्रदर्शित किया जाए?

एक और चर बनाएँ, और एसवीजी को text जोड़ें:

var texts = svg.selectAll(".myTexts")
    .data(data)
    .enter()
    .append("text");

texts.attr("x", function(d){ return d + 16})
    .attr("y", function(d,i){ return 30 + i*40})
    .text(function(d){ return d});

और यह परिणाम है:

और यहाँ फिडल है ।

एसवीजी: ड्राइंग ऑर्डर

यह कुछ ऐसा है जो निराशाजनक हो सकता है: आप डी 3 का उपयोग करके एक विज़ुअलाइज़ेशन बनाते हैं। लेकिन आप जिस आयत को शीर्ष पर चाहते हैं वह किसी अन्य आयत के पीछे छिपा हुआ है, या आपके द्वारा किसी सर्कल के पीछे होने की योजना बनाई गई रेखा वास्तव में इसके ऊपर है। आप अपने CSS में z-index का उपयोग करके इसे हल करने का प्रयास करते हैं, लेकिन यह काम नहीं करता है (SVG 1.1 में)।

स्पष्टीकरण सरल है: एक एसवीजी में, तत्वों का क्रम "पेंटिंग" के क्रम को परिभाषित करता है, और पेंटिंग का क्रम परिभाषित करता है जो शीर्ष पर जाता है।

एसवीजी दस्तावेज़ टुकड़े में तत्वों का एक निहित ड्राइंग क्रम होता है, जिसमें एसवीजी दस्तावेज़ टुकड़ा में पहले तत्व पहले "पेंट" हो जाते हैं। बाद के तत्वों को पहले से चित्रित तत्वों के ऊपर चित्रित किया गया है।

तो, मान लीजिए कि हमारे पास यह एसवीजी है:

<svg width="400" height=200>
    <circle cy="100" cx="80" r="60" fill="blue"></circle>
    <circle cy="100" cx="160" r="60" fill="yellow"></circle>
    <circle cy="100" cx="240" r="60" fill="red"></circle>
    <circle cy="100" cx="320" r="60" fill="green" z-index="-1"></circle>
</svg>

उसके चार वृत्त हैं। नीला वृत्त पहले वाला "चित्रित" है, इसलिए यह अन्य सभी के लिए मधुर होगा। फिर हमारे पास पीला एक है, फिर लाल एक है, और अंत में हरा एक है। हरा एक आखिरी है, और यह शीर्ष पर होगा।

यह कैसा दिखता है:

एसवीजी तत्वों के क्रम को डी 3 के साथ बदलना

तो, क्या तत्वों के क्रम को बदलना संभव है? क्या मैं ग्रीन सर्कल के सामने लाल सर्कल बना सकता हूं?

हाँ। पहला दृष्टिकोण जो आपको ध्यान में रखने की आवश्यकता है वह है आपके कोड की पंक्तियों का क्रम: पृष्ठभूमि के तत्वों को पहले ड्रा करें, और बाद में कोड में अग्रभूमि के तत्वों को शामिल करें।

लेकिन हम तत्वों के क्रम को गतिशील रूप से बदल सकते हैं, भले ही वे चित्रित किए गए थे। कई सादे जावास्क्रिप्ट फ़ंक्शंस हैं जो आप ऐसा करने के लिए लिख सकते हैं, लेकिन डी 3 में पहले से ही 2 अच्छी सुविधाएँ हैं, selection.raise() और selection.lower() ।

एपीआई के अनुसार:

Selection.raise (): प्रत्येक चयनित तत्व को फिर से सम्मिलित करता है, क्रम में, अपने माता-पिता के अंतिम बच्चे के रूप में। Selection.lower (): प्रत्येक चयनित तत्व को फिर से सम्मिलित करता है, क्रम में, अपने माता-पिता की पहली संतान के रूप में।

इसलिए, यह दिखाने के लिए कि हमारे पिछले एसवीजी में तत्वों के क्रम में हेरफेर कैसे करें, यहां एक बहुत छोटा कोड है:

d3.selectAll("circle").on("mouseover", function(){
    d3.select(this).raise(); 
});

यह क्या करता है? यह सभी सर्कल का चयन करता है और, जब उपयोगकर्ता एक सर्कल पर होवर करता है, तो वह उस विशेष सर्कल का चयन करता है और इसे सामने लाता है। बहुत आसान!

और यहां लाइव कोड के साथ JSFiddle है ।