D3.js: 'g' trong .append ("g") mã D3.js là gì?

Question

Tôi mới vào D3.js, bắt đầu học ngày nay chỉ

Tôi nhìn các sự donut example 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 cho documentation, nhưng không hiểu những gì .append("g") được phụ thêm

Is thậm chí là D3 cụ thể?

Tìm hướng dẫn tại đây

Answer 1

Nó gắn thêm 'g' element vào SVG. g yếu tố is used to group SVG shapes together, vì vậy không, nó không phải là d3 cụ thể.

Answer 2

Phần tử được sử dụng để nhóm các hình SVG lại với nhau. Khi được nhóm, bạn có thể chuyển đổi toàn bộ nhóm hình dạng như thể nó là một hình dạng duy nhất. Khả năng chuyển đổi tất cả các hình dạng trong một phần tử là một lợi thế so với việc nhóm các hình dạng trong một khung-lồng nhau. -quyền không thể tự biến đổi. Bạn sẽ phải lồng tổ hợp -element trong vòng -element để chuyển đổi các hình dạng lồng nhau của nó.

Answer 3

Tôi cũng đến đây từ đường cong học tập d3. Như đã chỉ ra điều này không cụ thể đối với d3, nó là đặc trưng cho các thuộc tính svg. Đây là một hướng dẫn thực sự tốt giải thích những ưu điểm 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ư những bản bạn sẽ làm trong bản trình bày powerpoint.

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

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

Các -element không có x và y thuộc tính. Để di chuyển nội dung của một sự kiện, bạn chỉ có thể thực hiện việc sử dụng thuộc tính biến đổi, bằng cách sử dụng chức năng "dịch", như sau: transform = "translate (x, y)".