D3.js: โค้ด 'g' ใน. ผนวก (“ g”) โค้ด D3.js คืออะไร

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

— คนสร้างวิมานในอากาศ
แหล่งที่มา

5

คำตอบที่ดีมาในด้านล่าง ความเป็นไปได้ที่ควรตรวจสอบวิดีโอ youtube ต่อไปนี้จาก D3Vienno เกี่ยวกับการจัดกลุ่มใน D3 youtube.com/watch?v=SYuFy1j8SGsจริง ๆ แล้วถ้าคุณเริ่มออกรายการทั้งชุดนั้นคุ้มค่าที่จะดู :-)

— d3noob

116

มันผนวกองค์ประกอบ 'g'เข้ากับ SVG gองค์ประกอบที่ใช้ในการจัดกลุ่มรูปร่าง SVG ไว้ด้วยกันดังนั้นจึงไม่เฉพาะเจาะจงของ d3

— Cihan Keser
แหล่งที่มา

1

เอกสาร MDN สำหรับ javascript ให้ความสว่างเสมอ: developer.mozilla.org/en/docs/Web/SVG/Element/g สามารถพบปากกาทดลองได้ที่นี่: codepen.io/ahujamoh/pen/brRpWM

— Mohit

17

ฉันมาที่นี่จากช่วงการเรียนรู้ d3 เช่นกัน ดังที่ได้ชี้ให้เห็นแล้วว่าสิ่งนี้ไม่ได้เฉพาะเจาะจงกับ d3 จึงเป็นคุณลักษณะเฉพาะของ svg นี่คือบทเรียนที่ดีมากที่อธิบายถึงข้อดีของ svg: g (การจัดกลุ่ม)

ไม่แตกต่างจากกรณีการใช้งานของ "การจัดกลุ่ม" ในการเขียนแบบกราฟิกเช่นที่คุณจะทำในการนำเสนอ PowerPoint

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

ตามที่ระบุไว้ในลิงก์ด้านบน: ในการแปลคุณต้องใช้แปล (x, y):

<g>-elementไม่ได้มี x และคุณลักษณะ Y ในการย้ายเนื้อหาของ a <g>-elementคุณสามารถทำได้โดยใช้คุณสมบัติการแปลงโดยใช้ฟังก์ชั่น "แปล" เช่นนี้: transform = "translate (x, y)"

— kramamurthi
แหล่งที่มา