D3.js: 'g' trong .append (tại đây là gì) Mã D3.js?

129

Tôi mới làm quen D3.js, chỉ bắt đầu học hôm nay

Tôi đã xem ví dụ về bánh rán và tìm thấy mã này

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

Tôi đã tìm kiếm tài liệu , nhưng không hiểu những gì .append("g")đang nối thêm

Nó thậm chí còn D3cụ thể?

Tìm kiếm hướng dẫn ở đây

javascript d3.js

— người mơ mộng
nguồn

5

Câu trả lời tốt đến dưới đây. Có thể đáng để xem video youtube sau từ D3Vienno về việc nhóm trong D3. youtube.com/watch?v=SYuFy1j8SGs Trên thực tế, nếu bạn đang bắt đầu, toàn bộ loạt phim rất đáng xem :-).

— d3noob

116

Nó gắn phần tử 'g' vào SVG. gphần tử được sử dụng để nhóm các hình dạng SVG lại với nhau , vì vậy không có phần tử nào không cụ thể.

— Cihan Keser
nguồn

1

Tài liệu MDN cho javascript luôn khai sáng: developer.mozilla.org/en/docs/Web/SVG/Euity/g . Một cây bút thử nghiệm có thể được tìm thấy ở đây: codepen.io/ahujamoh/pen/brRpWM

— Mohit

17

Tôi đến đây từ một đường cong học tập d3 là tốt. Như đã chỉ ra điều này không đặc trưng cho d3, nó đặc trưng cho các thuộc tính svg. Dưới đây là một hướng dẫn thực sự tốt giải thích những lợi thế của svg: g (nhóm).

Nó không khác với trường hợp sử dụng "nhóm" trong các bản vẽ đồ họa như những gì bạn sẽ làm trong một bản trình bày powerpoint.

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

Như được chỉ ra trong liên kết ở trên: để dịch bạn cần sử dụng dịch (x, y):

Các <g>-elementkhông có x và thuộc tính y. Để di chuyển nội dung của một <g>-elementbạn chỉ có thể làm như vậy bằng cách sử dụng thuộc tính biến đổi, sử dụng chức năng "dịch", như thế này: Transform = "dịch (x, y)".

— kramamurthi
nguồn