D3轉換比例和轉換

我試圖理解轉換如何在D3中工作，但我認爲我沒有得到它。D3轉換比例和轉換

比例尺是否改變了SVG對象的大小？這意味着如果我給一個大數目的對象的大小會看起來更大？翻譯是否將對象從一個地方移動到不同的地方？我試過了，但沒有像我想的那樣工作。

請問你能解釋一下它應該如何工作？

來源

2012-06-05 user1365697

轉換是SVG轉換（詳情請看standard）。基本上，縮放和平移將相應的轉換應用到座標系，在大多數情況下應該按預期工作。但是，您可以應用多個轉換（例如，第一個縮放然後轉換），然後結果可能不是您所期望的。

使用變換時，請記住它們會變換座標系。原則上，你所說的是真實的 - 如果將一個比例> 1應用於某個對象，它將看起來更大，並且平移將相對於其他對象移動到不同的位置。

來源

2012-06-05 09:10:19

我意識到這個問題是相當老了，但想分享集團的快速演示轉變，路徑/形狀和相對位置，爲別人誰在這裏找到自己的方式尋找更多的信息：

http://bl.ocks.org/dustinlarimer/6050773

來源

2013-07-23 19:18:28 larimer

似乎在我看的時候被切斷，但是感謝分享 – user4815162342

這個例子只適用於IE;在FF和Chrome中破解。 – Upperstage

你們能分享一下嗎？它似乎對我來說工作得很好。 – larimer

Scott Murray has a great explanation。例如，對於代碼片段：

svg.append("g") 
    .attr("class", "axis") 
    .attr("transform", "translate(" + x + "," + y + ")") 
    .call(xAxis);

他解釋道使用下列內容：

注意，我們使用ATTR（）申請轉化爲克的屬性。 SVG 轉換功能非常強大，可以接受幾種不同類型的轉換定義，包括縮放和旋轉。但我們是保持它簡單，只有一個轉換變換，這簡單地推動整個g組上下一定量。

翻譯變換通過簡單的語法 translate（x，y）指定，其中x和y很明顯是用於平移元素的水平和垂直像素的數量。

來源

2014-04-09 14:10:22

你能否提供一個如何使用'style'屬性設置'transform'的示例代碼？ 10倍 – vsync

D3轉換比例和轉換

回答

相關問題