D3.js：.append（「g」）中的'g'是什麼？D3.js代碼？

我是新來D3.js，開始學習今天只有D3.js：.append（「g」）中的'g'是什麼？D3.js代碼？

我看了的donut example，發現這個代碼

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

我搜索documentation，但沒有明白.append("g")被追加

是它甚至D3具體？

尋找蒞臨指導

來源

2013-06-12 daydreamer

好的答案在下面。可能值得在D3中對D3Vienno的以下YouTube視頻進行分組。 https://www.youtube.com/watch?v=SYuFy1j8SGs其實，如果你剛開始，整個系列值得一看:-)。 – d3noob

它附加一個'g' element到SVG。 g元素is used to group SVG shapes together，所以不，它不是D3特定的。

來源

2013-06-12 06:09:24

JavaScript的MDN文檔始終值得啓發：https：//developer.mozilla.org/en/docs/Web/SVG/Element/g。實驗筆可以在這裏找到：https://codepen.io/ahujamoh/pen/brRpWM – ahujamoh

該元素用於將SVG形狀組合在一起。分組後，您可以將整組形狀轉換爲單個形狀。與在嵌套元素中分組形狀相比，轉換元素內所有形狀的能力是一個優勢。元素不能自行轉換。你將不得不嵌套元素來轉換它的嵌套形狀。

來源

2013-06-12 06:16:36 ajjain

嗨@ajjain，感謝您的信息。僅供參考，我認爲這裏的政策是將任何複製的內容歸入原始來源（即Jenkov的svg/g文章：http://tutorials.jenkov.com/svg/g-element.html）。 – Astravagrant

我也是從D3學習曲線來的。正如已經指出的那樣，這不是特定於d3的，它對於svg屬性是特定的。這是一個非常好的教程，解釋了svg：g（分組）的優點。

這與圖形圖紙中的「分組」使用情況沒有什麼不同，例如就像您在PowerPoint演示文稿中所做的那樣。

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

如上鍊接指向：翻譯你需要使用翻譯（X，Y）：

的 - 元素不具有x和y屬性。要移動元素的內容，只能使用transform屬性，使用「translate」函數執行此操作，如下所示：transform =「translate（x，y）」。

來源

2013-07-31 20:31:57 kramamurthi

D3.js：.append（「g」）中的'g'是什麼？D3.js代碼？

回答

相關問題