D3.js: .append ("g") D3.js कोड में 'g' क्या है?

Question

मैं नया हूं D3.js, आज ही सीखना शुरू किया है

मैंने डोनट उदाहरण देखा और यह कोड पाया

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

मैंने दस्तावेज़ीकरण की खोज की , लेकिन समझ में नहीं आया कि क्या .append("g")जोड़ा जा रहा है

क्या यह D3विशिष्ट भी है ?

यहां मार्गदर्शन के लिए देख रहे हैं

Comments

नीचे दिए गए अच्छे उत्तर। डी 3 में समूहीकरण पर डी 3 वीनीओ से निम्न यूट्यूब वीडियो की जांच करना संभव है। youtube.com/watch?v=SYuFy1j8SGs दरअसल, अगर आप शुरू कर रहे हैं, तो पूरी श्रृंखला :-) देखने लायक है।

— d3noob

Answer 1

यह एसवीजी को एक 'जी' तत्व जोड़ता है । gतत्व का उपयोग एसवीजी आकार को एक साथ करने के लिए किया जाता है , इसलिए नहीं, यह डी 3 विशिष्ट नहीं है।

Comments

जावास्क्रिप्ट के लिए MDN प्रलेखन हमेशा ज्ञानवर्धक होता है: developer.mozilla.org/en/docs/Web/SVG/Element/g । एक प्रयोगात्मक कलम यहां पाई जा सकती है: codepen.io/ahujamoh/pen/brRpWM

— मोहित

Answer 2

मैं यहां एक डी 3 लर्निंग कर्व से भी आया था। जैसा कि पहले ही बताया गया है कि यह d3 के लिए विशिष्ट नहीं है, यह svg विशेषताओं के लिए विशिष्ट है। यहाँ svg: g (समूहीकरण) के फायदों को समझाने वाला एक बहुत अच्छा ट्यूटोरियल है।

ऐसा नहीं है कि ग्राफिकल ड्रॉइंग्स में "ग्रुपिंग" के उपयोग के मामले से अलग हैं जैसे कि आप पावरपॉइंट प्रस्तुति में करेंगे।

http://tutorials.jenkov.com/svg/g-element.html

जैसा कि ऊपर दिए गए लिंक में बताया गया है: अनुवाद करने के लिए आपको अनुवाद (x, y) का उपयोग करने की आवश्यकता है:

इसमें <g>-elementx और y विशेषताएँ नहीं हैं। सामग्री को स्थानांतरित करने के लिए <g>-elementआप केवल ट्रांसफॉर्मेशन विशेषता का उपयोग करके "ट्रांसलेट" फ़ंक्शन का उपयोग कर सकते हैं, जैसे: ट्रांसफॉर्मेशन = "ट्रांसलेशन (x, y)"।