D3.js: .append ("g") D3.js কোডে 'g' কী?

129

আমি নতুন 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নির্দিষ্ট?

এখানে গাইডেন্স খুঁজছি

javascript d3.js

— Daydreamer
সূত্র

5

ভাল উত্তর নীচে আসছে। ডি 3-তে গ্রুপিংয়ের বিষয়ে ডি 3 ভিয়েনো থেকে নিম্নলিখিত ইউটিউব ভিডিওটি পরীক্ষা করে দেখার উপযুক্ত। youtube.com/watch?v=SYuFy1j8SGs আসলে, আপনি যদি শুরু করছেন, পুরো সিরিজটি দেখার জন্য মূল্যবান :-)।

— d3noob

116

এটি এসভিজিতে একটি 'জি' উপাদান যুক্ত করে। gউপাদানগুলি একসাথে এসভিজি আকারগুলি গোষ্ঠী করতে ব্যবহৃত হয় , সুতরাং এটি ডি 3 নির্দিষ্ট নয়।

— সিহান কেসার
সূত্র

1

জাভাস্ক্রিপ্টের জন্য এমডিএন ডকুমেন্টেশন সর্বদা আলোকিত করে: বিকাশকারী.মোজিলা.অর্গ / en/docs/Web/SVG/Element/g । পরীক্ষামূলক কলমটি এখানে পাওয়া যাবে: codepen.io/ahujamoh/pen/brRpWM

— মোহিত

17

আমি পাশাপাশি ডি 3 লার্নিং কার্ভ থেকে এখানে এসেছি। যেমনটি ইতিমধ্যে চিহ্নিত হয়েছে এটি ডি 3-এর সাথে সুনির্দিষ্ট নয়, এটি এসভিজি বৈশিষ্ট্যগুলির সাথে নির্দিষ্ট। এখানে একটি ভাল টিউটোরিয়াল যা এসভিজি: জি (গ্রুপিং) এর সুবিধাগুলি ব্যাখ্যা করে।

গ্রাফিকাল অঙ্কনগুলিতে যেমন "গ্রুপিং" এর ব্যবহারের ক্ষেত্রে যেমন পাওয়ার পাওয়ারপয়েন্ট উপস্থাপনায় আপনি করতেন তেমন আলাদা নয়।

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

উপরের লিঙ্কে নির্দেশিত হিসাবে: অনুবাদ করতে আপনাকে অনুবাদ (x, y) ব্যবহার করতে হবে:

এর <g>-elementx এবং y বৈশিষ্ট্য নেই। একটির বিষয়বস্তু সরাতে <g>-elementআপনি কেবল "ট্রান্সলেট" ফাংশনটি ব্যবহার করে ট্রান্সফর্ম অ্যাট্রিবিউট ব্যবহার করে এটি করতে পারেন: ট্রান্সফর্ম = "ট্রান্সলেট (এক্স, ওয়াই)"।

— kramamurthi
সূত্র