> [Wiki](Home) ? [[API--中文手冊]] ? [[SVG函數]] ? **SVG 形狀**
* 本文檔是D3官方文檔中文翻譯，并保持與[最新版](https://github.com/mbostock/d3/wiki/API-Reference)同步。
* 如發現翻譯不當或有其他問題可以通過以下方式聯系譯者:
* 郵箱：zhang_tianxu@sina.com
* QQ群：[D3數據可視化](http://jq.qq.com/?_wv=1027&k=ZGcqYF)205076374，[大數據可視化](http://jq.qq.com/?_wv=1027&k=S8wGMe)436442115
SVG有大量的內置建議圖形。例如：軸對齊矩形和圓形。為了更大的靈活性，可以使用SVG的路徑（path）元素結合D3的路徑數據生成器。如果你熟悉Protovis，你會注意到，D3的路徑生成類似Protovis的標記（marks）。
形狀生成器，例如d3.svg.arc返回的，既是一個對象又是一個函數。也就是說，你可以像其他函數一樣調用shape，并且shape含有額外的方法來改變它的行為。像D3中的其他類一樣，shape遵循鏈式語法由setter方法返回shape自己。允許在一個簡單的申明中調用多個setter方法。
SVG Elements
所有的SVG形狀都可以使用transform屬性轉換。你可以將轉換直接應用在shape上，或者應用在含g的元素上。這樣，當形狀是定義為“軸對齊”的，這只意味著在本地坐標系中軸對齊；你可以旋轉或者轉換形狀。形狀可使用fill 和 stroke樣式填充或者描邊（你也可以使用同名稱的屬性，但是當兼容外部樣式時推薦使用樣式）。
# svg:rect x="0" y="0" width="0" height="0" rx="0" ry="0"
Rect矩形元素定義一個軸對齊的矩形。矩形的左上角使用x，y屬性定位，使用width和height指定尺寸。圓角矩形可以使用可選參數rx 和 ry生成。
# svg:circle cx="0" cy="0" r="0"
circle圓形元素定義了一個基于中心點和半徑的圓形。使用cx和cy屬性指定圓的中心。使用r屬性指定圓的半徑。
# svg:ellipse cx="0" cy="0" rx="0" ry="0"
Ellipse橢圓元素定義了一個軸對齊的橢圓，基于一個中心點和兩個半徑。中心點使用cx和cy屬性定位。而半徑使用rx 和ry指定。
# svg:line x1="0" y1="0" x2="0" y2="0"
Line直線元素定義線段始于一個點而終止于另一個點。第一個點使用x1和y1屬性指定，第二個點使用x2和y2屬性指定。線元素常用來畫規則，參考線，軸和刻度線。
# svg:polyline points=""
polyline 折線元素定義一組相連的直線段。通常，polyline 元素定義開放形狀。使用points屬性指定構成折線的點。注意：在D3中通常將d3.svg.line路徑生成器和path元素一起使用會更方便靈活。
# svg:polygon points=""
polygon 多邊形元素定義一個由一組相連的直線段構成的閉合圖形。使用points屬性指定構成多邊形的點。注意：在D3中通常將d3.svg.line路徑生成器和path元素一起使用會更方便靈活。線可以使用路徑關閉命令"Z"閉合。
# svg:text x="0" y="0" dx="0" dy="0" text-anchor="start"
Text文本元素定義文本組成的圖形元素。文本元素的文本內容（參見文本操作符）定義用來渲染的字符。文本元素的錨點使用x，y屬性控制。另外，文本可以使用dx，dy屬性偏移。這個偏移在你可以使用與字體大小相關的“em”單元控制文本的邊沿和基線時尤其方便。橫向文本對齊由text-anchor屬性控制，下面是一些例子：
<svg:text text-anchor="start">left-align, bottom-baseline</svg:text>
<svg:text text-anchor="middle">center-align, bottom-baseline</svg:text>
<svg:text text-anchor="end">right-align, bottom-baseline</svg:text>
<svg:text dy=".35em" text-anchor="start">left-align, middle-baseline</svg:text>
<svg:text dy=".35em" text-anchor="middle">center-align, middle-baseline</svg:text>
<svg:text dy=".35em" text-anchor="end">right-align, middle-baseline</svg:text>
<svg:text dy=".71em" text-anchor="start">left-align, top-baseline</svg:text>
<svg:text dy=".71em" text-anchor="middle">center-align, top-baseline</svg:text>
<svg:text dy=".71em" text-anchor="end">right-align, top-baseline</svg:text>
有可能有一個更好的方法來指定文字的基線，使用SVG的基線對齊屬性，但是這不是被瀏覽器廣泛地支持的。最后，字體的顏色通常使用fill樣式指定（你也可以使用stroke），字體使用font，font-family，font-size和相關的樣式控制。一些瀏覽器也支持CSS3屬性，例如text-shadow。
# svg:path d="" transform=""
Path路徑元素代表了形狀的輪廓可以被填充，描邊，用做剪裁路徑，或者這三者的任意組合。d屬性定義了路徑數據，這是路徑命令的一個迷你語言，例如moveto (M)，lineto (L)和closepath (Z)。路徑元素是一個SVG中所有其他形狀的概括，幾乎可以用來畫出任何東西！
Path Data Generators
為了簡化路徑元素的d屬性的構造，D3包含很多輔助類用來生成路徑數據。如果你熟悉Protovis，你就會發現這些路徑生成器和Protovis的標記類型是相似的：每個生成器就是一個數據的函數。所以，如果你的數據是xy坐標序列。你可以定義訪問器函數，路徑生成器用來制造路徑數據。例如，你可以這樣定義生成器：
var line = d3.svg.line()
.x(function(d) { return d.x; })
.y(function(d) { return d.y; })
.interpolate("basis");
然后，你可以使用下面函數設置d屬性：
g.append("path")
.attr("d", line);
不論數據是否綁定到g元素（在這個例子中）都將傳遞給line實例。這樣，數據必須指定為一個數組。對于數據數組中的每個元素，x和y訪問器函數用來抽出控制點坐標。
路徑生成器，例如d3.svg.line返回的既是一個函數又是一個對象。這樣，你就可以像其他函數一樣調用生成器了。并且生成器還有額外的方法來改變它的行為。像D3中的其他類一樣，路徑生成器遵循方法鏈模式其中的setter方法返回生成器自身。允許在一個簡單的聲明中調用多個setter方法。
# d3.svg.line()
構造一個新的線生成器使用默認的x和y訪問器函數（假設輸入數據是一個兩元素數字數組；詳見下文），和線性插值器。返回的函數生成路徑數組為開口分段線性曲線，折線或者，如折線圖：
通過改變插值器，你可以生成樣條線以及步長函數。另外，不要害怕最后粘上其他路徑命令。例如，如果你想生成一個封閉的路徑，追加closepath (Z)命令：
g.append("path")
.attr("d", function(d) { return line(d) + "Z"; });
線生成器設計來和面積生成器一起使用。例如，當生成面積圖時，你可能使用帶有填充屬性的面積生成器，以及帶有描邊屬性的線生成器來突出面積的上邊緣。當線生成器只是用來設置d屬性，你可以使用SVG樣式和屬性控制線的展示，例如fill，stroke和stroke-width。
# line(data)
為指定的data元素數組返回路徑數據字符串，如果路徑是空則返回null。
# line.x([x])
如果指定了x，為指定的函數或常量設置x訪問器。如果x沒有指定，返回當前的x訪問器。這個訪問器為傳遞給x線生成器的數據數組中的每個元素。默認的訪問器假設每個輸入的元素是一個二元素數字數組：
function x(d) {
return d[0];
}
通常，一個x訪問器是指定的，因為輸入數據是不同格式的，或者因為你想使用比例尺。例如，如果你的數據指定為一個含有x，y屬性的的對象，而不是一個元組，你可以反引用這些屬性同時應用比例尺：
var x = d3.scale.linear().range([0, w]),
y = d3.scale.linear().range([h, 0]);
var line = d3.svg.line()
.x(function(d) { return x(d.x); })
.y(function(d) { return y(d.y); });
X訪問器像D3中其他值函數一樣的方式調用。函數的This上下文就是選擇中的當前元素（通常，相同的this上下文調用線函數；然而，在通常情況下線生成器傳遞給attr操作符，this上下文將關聯DOM元素）。函數傳入兩個入參當前的數據d和當前的索引i。this上下文，索引就是控制點中的索引，而不是選擇中當前元素的索引。X訪問器按照數據數組中指定的順序，每個元素恰好調用一次。這樣，就可能指定不確定性訪問器，例如隨機數生成器。也可以指定x訪問器為一個常量而不是函數，在所有點都有相同的x坐標情況下。
# line.y([y])
如果指定了y，為指定的函數或常量設置y訪問器。如果y沒有指定，返回當前的y訪問器。這個訪問器為傳遞給y線生成器的數據數組中的每個元素。默認的訪問器假設每個輸入的元素是一個二元素數字數組：
function y(d) {
return d[1];
}
怎樣指定一個y訪問器，參見相似的x訪問器。
注意：像所有的其他圖形庫，SVG使用左上角作為原點。這樣在屏幕中較高的y值就更低。對于可視化我們常常想要原點是在左下角。一個簡單的方法實現這個可以使用range([h, 0])替代range([0, h])反轉y比例尺的范圍。
# line.interpolate([interpolate])
如果指定了interpolate 參數，就會設置插值器模式為指定的字符串或者函數。如果沒有指定，就返回當前的插值器模式。支持下面的命名插值器模式：
? linear -分段線性片段，如折線。
? linear-closed –閉合直線段，以形成一個多邊形。
? step - 水平和垂直段之間交替，如在step函數中。
? step-before -垂直和水平段之間交替，如在step函數中。
? step-after -水平和垂直段之間交替，如在step函數中。
? basis - B樣條曲線，在兩端的控制點的重復。
? basis-open – 開放B樣條曲線，首尾不會相交。
? basis-closed -封閉B樣條曲線，如在一個循環。
? bundle – 等價于basis, 除了使用tension參數拉直樣條曲線。
? cardinal – 基本樣條曲線，在末端控制點的重復。
? cardinal-open –開放的基本樣條曲線，首尾不會相交，但和其他控制點相交。
? cardinal-closed -封閉基本樣條曲線，如在一個循環。
? monotone - 三次插值，可以保留y的單調性。
其中一些插值模式的行為可能通過指定的張力tension進行進一步定制。
如果interpolate 是一個函數，然后這個函數將被調用來反轉一個形如[[x0, y0], [x1, y1], …]的點數組，返回一個SVG路徑數據字符串，用來展示線。字符串開始處的“M” 隱含的，不應該被返回。例如，線性插值被實現為：
function interpolateLinear(points) {
return points.join("L");
}
這相當于（并且比這更有效）：
function interpolateLinear(points) {
var path = "";
for (var i = 0; i < points.length; i++) {
if (i) path += "L";
path += points[i][0] + "," + points[i][1];
}
return path;
}
參見bl.ocks.org/3310323是另外一個自定義線性插值器。
# line.tension([tension])
如果指定tension 參數，設置基本樣條曲線插值器拉伸為指定的范圍[0, 1]內的數字。如果沒有指定tension 放回當前的拉伸。拉伸只在基本樣條曲線模塊有效：樣條曲線、開放樣條曲線和閉合樣條曲線。默認拉伸值是0.7。在某種意義上，這可以解釋為切線的長度； 1將產生全為零的切線，0產生Catmull-Rom樣條曲線。
注意：拉伸必須指定為一個常量，而不是函數，因為它是整個線的常數。但是，也可能使用同一個生成器生成的不同拉伸生成多條線。例如：
svg.selectAll("path")
.data([0, 0.2, 0.4, 0.6, 0.8, 1])
.enter().append("path")
.attr("d", function(d) { return line.tension(d)(data); });
在這個例子中（見live version），拉伸是在線生成器調用之前設置的，這樣就可以在線中使用相同的數據生成不同的路徑了。
live version：http://bl.ocks.org/mbostock/1016220
# line.defined([defined])
取得或者設置訪問器函數控制線的生成。如果指定了defined 參數，就設置新的訪問器函數并返回線。如果沒有指定defined ，就返回當前生成器默認就是function() { return true; }。定義的訪問器可以用來定義是否定義線，通常在和缺失數據一起使用時很有用。生成的數據將自動被分成多個不同的子路徑，跳過未定義數據，例如，如果你想忽略非數字（或者未定）的y值，可以這樣寫：
line.defined(function(d) { return !isNaN(d[1]); });
# d3.svg.line.radial()
構造一個新的徑向線生成器使用默認的半徑和角度訪問器函數（假設輸入數據是一個兩元素的數字數組；詳見下文），和一個線性插值器。返回的函數為開放的分段線性曲線，或折線與笛卡爾線生成器生成路徑數據。
# line(data)
為指定的data元素數組返回路徑數據字符串
# line.radius([radius])
function radius(d) {
return d[0];
}
如果指定了radius 參數，則設置半徑訪問器為指定的函數或常量。如果radius 沒有指定，返回當前的半徑訪問器。這個訪問器為傳遞給線生成器的數據數組中的每個元素調用。默認的訪問器假設每個輸入元素都是一個兩元素的數字數組：
function radius(d) {
return d[0];
}
這個方法是笛卡爾line.x方法的變形。
# line.angle([angle])
如果指定了angle 參數，設置角度訪問器為指定的函數或者弧度為單位的常量。如果沒有指定angle 參數，返回角度訪問器。訪問器為傳遞給線生成器的數據數組中的每個元素調用。默認的訪問器假設每個輸入元素是一個兩元素的數字數組。
function angle(d) {
return d[1];
}
如果指定了angle 參數，設置角度訪問器為指定的函數或者弧度為單位的常量。如果沒有指定angle 參數，返回角度訪問器。訪問器為傳遞給線生成器的數據數組中的每個元素調用。默認的訪問器假設每個輸入元素是一個兩元素的數字數組。
function angle(d) {
return d[1];
}
這個方法就是笛卡爾line.y 方法的變形。
# line.interpolate([interpolate])
參見笛卡爾 line.defined方法， 投影到笛卡爾空間之后慘發生插值。
# line.tension([tension])
參見笛卡爾 line.tension方法， 投影到笛卡爾空間之后慘發生插值。
# line.defined([defined])
參見笛卡爾 line.defined方法
# d3.svg.area()
構造一個新的面積生成器，使用默認的x（橫坐標），y0（基線），y1（頂線）訪問器函數（假定輸入數據是一個雙元素數字數組，詳見下文）和線性插值器。對于分段線性曲線，或多邊形，返回的函數生成一個封閉的path數據，如在面積圖中:
從概念上講，多邊形的形成是通過使用兩條線：頂線的形成是通過x（橫坐標）和y1（頂線）訪問器方法，從左至右生成。底線是添加到這一條線上，使用x （橫坐標）和y0（基線）訪問器方法，從右到左去生成。通過將轉換屬性設置為旋轉path元素90度，您還可以生成垂直的面積圖。通過改變插值，您還可以生成splines和臺step函數。
區域生成器被設計為與線生成器一起使用的。例如，當生成區域圖表時，你可能用一個帶有填充樣式的區域生成器和一個帶有描邊樣式的線生成器，此描邊樣式可以使區域的頂部邊緣更加突出顯示。由于區域生成器只可以用于設置d屬性，所以你可以通過使用標準的SVG樣式和屬性去控制區域的外觀，例如填充樣式。
創建streamgraphs (堆疊區域圖)，使用stack（疊層）布局。此布局可以為一個系列中的每個值去設置y0屬性，這個系列值可從y0（基線），y1（頂線）訪問器中使用。注意，每個系列中必須有相同數量的值，并且每個值必須有相同的x橫坐標；如果你在每系列里有缺失數據或不一致的x橫坐標，那么在計算疊層布局之前，你必須重新取樣和插入你的數據。
# area(data)
對于指定的數據元素數組，返回路徑（path）數據字符串；當路徑是空的時候返回null。
# area.x([x])
如果指定了x參數，設置x（橫坐標）訪問器為指定的方法或常量。如果沒有指定x，返回當前x訪問器。為傳遞給區域生成器的數據數組中的每個元素，調用該訪問器。默認訪問器中假定每個輸入元素是雙元素數字數組:
function x(d) {
return d[0];
}
通常情況下，x訪問器被指定是因為輸入數據是不同格式的，或者因為你想應用一個比例尺。例如，如果你的數據被指定為一個帶有x和y屬性的對象，而不是一個元組，那么你可能會引用這些屬性同時應用比例尺：
var x = d3.scale.linear().range([0, w]),
y = d3.scale.linear().range([h, 0]);
var area = d3.svg.area()
.x(function(d) { return x(d.x); })
.y0(h)
.y1(function(d) { return y(d.y); });
X訪問器會和D3中其他值函數一樣的方式被調用。函數中的this上下文就是選擇中的當前元素。（從技術上講，相同的this上下文調用區域函數；然而，通常情況下，區域生成器被傳遞到attr操作符，this上下文將會被關聯到DOM元素上）。函數被傳遞兩個參數，當前的數據（d）和當前的索引值（i）。在this上下文中，索引值就是控制數據點的數組中的索引，而不是當前選擇元素的索引。x訪問器在每一個數據中按照數據數組指定的順序被恰好調用一次。因此，可以指定一個不確定的訪問器，例如隨機數生成器。也可以指定x訪問器為一個常量，而不是一個函數，在這種情況下，所有的點將有相同的橫坐標值。
# area.x0([x0])
…
# area.x1([x1])
…
# area.y([y])
…
# area.y0([y0])
如果y0被指定，y0（基線）訪問器為指定的方法或常量。如果沒有指定y0，返回當前y0（基線）訪問器。將為傳遞給區域生成器數據數組中的每個元素，調用該訪問器函數。默認的訪問器是常量0，也就是使用一個固定的基線y = 0。對于如何指定一個y0（基線）訪問器的例子，請看類似的x訪問器。
# area.y1([y1])
如果指定參數y1 ，y1訪問器為指定的方法或常量。如果沒有指定y1，就會返回當前的y1訪問器。將為傳遞給區域生成器數據數組中的每個元素，調用該訪問器函數。默認的訪問器假定每個輸入元素是一個雙元素的數字數組:
function y1(d) {
return d[1];
}
關于如何指定一個y1（頂線）訪問器的一個例子，請看類似的x訪問器。注意，像大多數其他的圖形庫，SVG使用頂部-左側作為原點，因此更高的數值y將會在屏幕更低的位置。對于可視化而言，我們通常希望原點是位于底部-左側的位置。可以做到這一點的一個簡單的方法便是轉化y比例尺的范圍，即通過使用范圍([h,0])而不是范圍([0,h])。
# area.interpolate([interpolate])
如果指定插值器，便設置插值器模式為指定的字符串或函數。如果沒有指定插值器，返回當前插值器模式。插值器模式支持以下命名:
? linear（線性）：分段的線性片段，如折線。
? step（步）：水平和垂直片段之間交替，如臺階函數。
? step-before：垂直和水平片段之間交替，如臺階函數。
? step-after： 水平和垂直片段之間交替，如臺階函數。
? basis ：一個B-spline，在末尾控制點的重復。
? basis-open ：一個開放的B-spline；首尾不相交。
? cardinal ：一個Cardinal spline，在末尾控制點的重復。
? cardinal-open：一個開放的Cardinal spline；首尾不相交，但是會和其他控制點相交。
? monotone -立方插值保存y值得單調性。
其中一些插值模式的行為通過指定的張力（tension）可能被進一步自定義。從技術上講,同樣也會支持basis-closed和 cardinal-closed的插值模式，但這些模式應用在一條線上比應用在一個區域上更有意義。
如果參數interpolate是一個函數，那么這個函數將被調用去轉換一個形式為[[x0, y0], [x1, y1], …]的數組，返回一個SVG路徑數據字符串，它將用于顯示區域。字符串起始位置的“M”是隱含的，不會被返回。例如，線性插值的實現為:
function interpolateLinear(points) {
return points.join("L");
}
This is equivalent to (and more efficient than):
function interpolateLinear(points) {
var path = "";
for (var i = 0; i < points.length; i++) {
if (i) path += "L";
path += points[i][0] + "," + points[i][1];
}
return path;
}
See bl.ocks.org/3310323 for another example of custom interpolation.
這個（比下邊效率更高）相當于：
functioninterpolateLinear(points){
varpath="";
for(vari=0;i<points.length;i++){
if(i)path+="L";
path+=points[i][0]+","+points[i][1];
}
returnpath;
}
請查看另一個自定義插值的樣例：bl.ocks.org/3310323
# area.tension([tension])
如果指定tension，便將基數樣條(Cardinal spline)插值張力（tension）設置為指定區間[0,1]內的數字。如果沒有指定張力，返回當前的張力值。張力值只會影響基本插值模式：cardinal，cardinal-open 和cardinal-closed。默認的張力值是0.7。在某種意義上，這可以解釋為切線長度；值1將產生零切線，值0將產生一個Catmull-Rom spline。注意，張力值必須指定為一個常數，而不是一個函數，因為它是整個區域的常數。
# area.defined([defined])
獲取或設置訪問器函數，此方法用來控制已經明確定義的區域。如果指定參數defined（定義），便設置新的取值函數（訪問器）并返回該區域。如果沒有指定defined（定義），則返回當前訪問器的默認函數，即function(){return true;}。定義訪問器可用于定義哪些區域是定義的，哪些是未定義的，通常對于有數據缺失情況是很有用的；生成的路徑數據將自動被分為多個不同的子路徑，同時跳過未定義的數據。例如，如果您想要忽略那些不是一個數字的（或未定義的）y值，你可以這樣寫:
area.defined(function(d) { return !isNaN(d[1]); });
# d3.svg.area.radial()
…
# area(data)
對于指定的數組中的數據元素（data），返回路徑數據字符串。
# area.radius([radius])
…
# area.innerRadius([radius])
…
# area.innerRadius([radius])
…
# area.angle([angle])
…
# area.startAngle([angle])
…
# area.endAngle([angle])
…
# d3.svg.arc()
構造一個新的弧生成器，使用默認的內半徑、外半徑、開始弧度和結束弧度訪問器（假定輸入數據是包含匹配于訪問器的命名屬性的對象，詳見下文）；而默認的訪問器假定弧的尺寸是動態指定的，當然設置一個或多個的尺寸為常量也是很常見的，例如餅圖的內半徑設為0；返回的函數為封閉的實心弧度生成路徑數據，如餅圖或環圖：
事實上，有四種可能性：圓circle（內半徑為0，角度跨度大于等于2π），扇形circular sector（內半徑為0，角度跨度小于2π），環形 annulus（內半徑大于0，角度跨度為2π），以及環形扇區（內半徑大于0，并且角度跨度小于2π）。
# arc(datum[, index])
為指定的datum參數返回路徑數據字符串。可選參數index 可能會指定，傳遞給弧度訪問器函數。
# arc.innerRadius([radius])
如果指定radius ，則設置內半徑訪問器outerRadius-accessor為指定值或函數；如果未指定，則返回當前的內半徑訪問器；訪問器參數傳遞給弧生成器時調用；默認訪問器假定輸入數據是帶有適當命名屬性的對象：
function innerRadius(d) {
return d.innerRadius;
}
通常情況下，指定內半徑訪問器 innerRadius-accessor是由于：輸入數據是不同的格式、或你想要應用比例尺，亦或你想為圓環指定個恒定的內半徑。
內半徑訪問器會像D3的其他函數一樣被調用；函數中的this代表選擇中的當前元素（技術上來說，this上下文調用弧函數；然而一般情況下，弧生成器傳遞給attr操作符， this上下文將關聯DOM元素）；函數傳遞兩個參數：當前數據d和索引i；當然，也可以指定其為一個常數而不是函數。
# arc.outerRadius([radius])
如果指定radius ，則設置外半徑訪問器outerRadius-accessor為指定值或函數；如果未指定，則返回當前的外半徑訪問器；訪問器參數傳遞給弧生成器時調用；默認訪問器假定輸入數據是帶有適當命名屬性的對象：
function outerRadius(d) {
return d.outerRadius;
}
通常情況下，指定外半徑訪問器 innerRadius-accessor是由于：輸入數據是不同的格式、或你想要應用比例尺，亦或你想為圓環指定個恒定的外半徑。
外半徑訪問器會像D3的其他函數一樣被調用；函數中的this代表選擇中的當前元素（技術上來說，this上下文調用弧函數；然而一般情況下，弧生成器傳遞給attr操作符， this上下文將關聯DOM元素）；函數傳遞兩個參數：當前數據d和索引i；當然，也可以指定其為一個常數而不是函數。
# arc.startAngle([angle])
如果指定angle，則設置開始角度訪問器startAngle-accessor為指定的函數或常數，如果未指定，則返回當前的訪問器；角度使用弧度radians表示，盡管SVG中使用的是角度；角度為0對應12點鐘的指針方向（負數y）并且順時鐘方向繼續旋轉2π；訪問器參數傳遞給弧生成器時調用；默認訪問器假定輸入數據是帶有適當命名屬性的對象：
function startAngle(d) {
return d.startAngle;
}
為了構建餅圖和環圖，需要計算每個弧的起始角度和上個弧的結束角度；使用餅布局 pie會非常方便的，即類似于堆疊布局stack；給定一組輸入數據，餅布局會調用弧對象來生成開始弧度和結束弧度屬性，你也可以使用默認的弧訪問器。
開始角度訪問器startAngle-accessor會像D3的其他函數一樣被調用；函數傳遞兩個參數：當前數據d和索引i；當然，也可以指定其為一個常數。
# arc.endAngle([angle])
如果指定angle，則設置開始角度訪問器endAngle-accessor為指定的函數或常數，如果未指定，則返回當前的訪問器；角度使用弧度radians表示，盡管SVG中使用的是角度；訪問器會以傳遞給弧度生成器的參數形式被調用；默認訪問器假定輸入數據是包含適當命名屬性的對象：
function endAngle(d) {
return d.endAngle;
}
為了構建餅圖和環圖，需要計算每個弧的起始角度和上個弧的結束角度；這保證了你會非常方便的使用餅布局 pie，即類似于堆疊布局stack；給定一組數據，餅布局會調用弧對象來生成開始弧度和結束弧度屬性，你也可以使用默認的弧訪問器。
開始角度訪問器endAngle-accessor會像D3的其他函數一樣被調用；函數傳遞兩個參數：當前數據d和索引i；當然，也可以指定其為一個常數。
# arc.centroid(arguments…)
計算以指定輸入參數產生的弧的圓心，通常情況下，參數為：當前數據d和索引i；圓心被定義為內外半徑和開始結束角度的極坐標系的中心點；這為圓弧的標簽提供了方便的位置信息，例如：
arcs.append("text")
.attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; })
.attr("dy", ".35em")
.attr("text-anchor", "middle")
.text(function(d) { return d.value; });
或者，你可以使用SVG的變換transform 屬性來旋轉文本的位置，即使你可能需要轉換弧度為角度；另一種可能性是使用 textPath元素來依照弧的path路徑來彎曲文本標簽顯示。
# d3.svg.symbol()
Constructs a new symbol generator with the default type- and size-accessor functions (that make no assumptions about input data, and produce a circle sized 64 square pixels; see below for details). While the default accessors generate static symbols, it is common to set one or more of the accessors using a function, such as setting the size proportional to a dimension of data for a scatterplot. The returned function generates path data for various symbols, as in a dot plot:
Note that the symbol does not include accessors for x and y. Instead, you can use the path element's transform attribute to position the symbols, as in:
vis.selectAll("path")
.data(data)
.enter().append("path")
.attr("transform", function(d) { return "translate(" + x(d.x) + "," + y(d.y) + ")"; })
.attr("d", d3.svg.symbol());
In the future, we may add x- and y-accessors for parity with the line and area generators. The symbol will be centered at the origin (0,0) of the local coordinate system. You can also use SVG's built-in basic shapes to produce many of these symbol types, though D3's symbol generator is useful in conjunction with path elements because you can easily change the symbol type and size as a function of data.
# symbol(datum[, index])
Returns the path data string for the specified datum. An optional index may be specified, which is passed through to the symbol's accessor functions.
# symbol.type([type])
If type is specified, sets the type-accessor to the specified function or constant. If type is not specified, returns the current type-accessor. The default accessor is the constant "circle", and the following types are supported:
? circle - a circle.
? cross - a Greek cross or plus sign.
? diamond - a rhombus.
? square - an axis-aligned square.
? triangle-down - a downward-pointing equilateral triangle.
? triangle-up - an upward-pointing equilateral triangle.
Types are normalized to have the same area in square pixels, according to the specifiedsize. However, note that different types' sizes may be affected by the stroke and stroke width in different ways. All of the types are designed to be visible when only a fill style is used (unlike the Protovis cross), although they generally look better when both a fill and stroke is used.
The type-accessor is invoked in the same manner as other value functions in D3. The thiscontext of the function is the current element in the selection. (Technically, the same thiscontext that invokes the arc function; however, in the common case that the symbol generator is passed to the attr operator, the this context will be the associated DOM element.) The function is passed two arguments, the current datum (d) and the current index (i). It is also possible to specify the type-accessor as a constant rather than a function.
# symbol.size([size])
If size is specified, sets the size-accessor to the specified function or constant in square pixels. If size is not specified, returns the current size-accessor. The default is 64. This accessor is invoked on the argument passed to the symbol generator. Typically, a size-accessor is specified as a function when you want the size of the symbol to encode aquantitative dimension of data, or a constant it you simply want to make all the dots bigger or smaller. If you want to specify a radius rather than the size, you must do so indirectly, for example using a pow scale with exponent 2.
# d3.svg.symbolTypes
The array of supported symbol types.
# d3.svg.chord()
Constructs a new chord generator with the default accessor functions (that assume the input data is an object with named attributes matching the accessors; see below for details). While the default accessors assume that the chord dimensions are all specified dynamically, it is very common to set one or more of the dimensions as a constant, such as the radius. The returned function generates path data for a closed shape connecting two arcs with quadratic Bézier curves, as in a chord diagram:
A chord generator is often used in conjunction with an arc generator, so as to draw annular segments at the start and end of the chords. In addition, the chord layout is useful for generating objects that describe a set of grouped chords from a matrix, compatible with the default accessors.
# chord(datum[, index])
Returns the path data string for the specified datum. An optional index may be specified, which is passed through to the chord's accessor functions.
# chord.source([source])
If source is specified, sets the source-accessor to the specified function or constant. If sourceis not specified, returns the current source-accessor. The purpose of the source accessor is to return an object that describes the starting arc of the chord. The returned object is subsequently passed to the radius, startAngle and endAngle accessors. This allows these other accessors to be reused for both the source and target arc descriptions. The default accessor assumes that the input data is an object with suitably-named attributes:
function source(d) {
return d.source;
}
The source-accessor is invoked in the same manner as other value functions in D3. The thiscontext of the function is the current element in the selection. (Technically, the same thiscontext that invokes the arc function; however, in the common case that the symbol generator is passed to the attr operator, the this context will be the associated DOM element.) The function is passed two arguments, the current datum (d) and the current index (i). It is also possible to specify the source-accessor as a constant rather than a function.
# chord.target([target])
If target is specified, sets the target-accessor to the specified function or constant. If target is not specified, returns the current target-accessor. The purpose of the target accessor is to return an object that describes the ending arc of the chord. The returned object is subsequently passed to the radius, startAngle and endAngle accessors. This allows these other accessors to be reused for both the source and target arc descriptions. The default accessor assumes that the input data is an object with suitably-named attributes:
function target(d) {
return d.target;
}
The target-accessor is invoked in the same manner as other value functions in D3. The function is passed two arguments, the current datum (d) and the current index (i). It is also possible to specify the target-accessor as a constant rather than a function.
# chord.radius([radius])
If radius is specified, sets the radius-accessor to the specified function or constant. If radiusis not specified, returns the current radius-accessor. The default accessor assumes that the input source or target description is an object with suitably-named attributes:
function radius(d) {
return d.radius;
}
The radius-accessor is invoked in a similar manner as other value functions in D3. The function is passed two arguments, the current source description (derived from the current datum, d) and the current index (i). It is also possible to specify the radius-accessor as a constant rather than a function.
# chord.startAngle([angle])
If startAngle is specified, sets the startAngle-accessor to the specified function or constant. IfstartAngle is not specified, returns the current startAngle-accessor. Angles are specified inradians, even though SVG typically uses degrees. The default accessor assumes that the input source or target description is an object with suitably-named attributes:
function startAngle(d) {
return d.startAngle;
}
The startAngle-accessor is invoked in a similar manner as other value functions in D3. The function is passed two arguments, the current source or target description (derived from the current datum, d) and the current index (i). It is also possible to specify the startAngle-accessor as a constant rather than a function.
# chord.endAngle([angle])
If endAngle is specified, sets the endAngle-accessor to the specified function or constant. IfendAngle is not specified, returns the current endAngle-accessor. Angles are specified inradians, even though SVG typically uses degrees. The default accessor assumes that the input source or target description is an object with suitably-named attributes:
function endAngle(d) {
return d.endAngle;
}
The endAngle-accessor is invoked in a similar manner as other value functions in D3. The function is passed two arguments, the current source or target description (derived from the current datum, d) and the current index (i). It is also possible to specify the endAngle-accessor as a constant rather than a function.
# d3.svg.diagonal()
使用默認的訪問函數（即假設輸入數據是一個屬性名與訪問器相匹配的對象；詳見下文）構造一個新的對角線生成器；返回的函數會生成一條貝塞爾曲線（path）來連接source和target兩端；當連接節點時，切線被指定用來產生平滑的扇入扇出，如一個node-link diagram圖：
雖然對角線默認為笛卡爾（軸對齊）的方向，但是可以用于使用投影的徑向或其他方向；
# diagonal(datum[, index])
根據指定的數據datum返回path的路徑數據字符串；一個可選的index 屬性可以被指定，被用來傳遞給對角線生成器的函數。
# diagonal.source([source])
如果source 指定，設置source 訪問器為指定的函數或常量；如果source 未指定，返回當前的source 訪問器；source 訪問器旨在返回描述對角線起點的對象，返回的對象隨后將會被傳遞給projection；默認的訪問器是假定輸入數據對象的屬性名和訪問器相匹配的，如：
function source(d) {
return d.source;
}
source 訪問器就像D3中其他值函數一樣方式被調用的；函數的this 就是當前元素的選擇；（技術上來說，調用對角線函數的this 是相同的；然而，通常情況下，這個符號生成器被傳遞給了attr 操作符，this 上下文將關聯DOM元素）；函數需要傳遞兩個參數：當前的數據d和當前所在索引i；另外，也可以指定source 訪問器為一個常數；
# diagonal.target([target])
如果target 指定，設置target 訪問器為指定的函數或常量；如果target 未指定，返回當前的target 訪問器；target 訪問器旨在返回描述對角線終點的對象，返回的對象隨后將會被傳遞給projection；默認的訪問器是假定輸入數據對象的屬性名和訪問器相匹配的，如：
function target(d) {
return d.target;
}
target 訪問器就像D3中其他值函數一樣方式被調用的；函數的this 就是選擇中的當前元素；函數需要傳遞兩個參數：當前的數據d和當前所在索引i；另外，也可以指定target 訪問器為一個常數而不是函數。
# diagonal.projection([projection])
如果投影projection 指定，設置projection 為指定的函數；如果projection 未指定，返回當前的projection ；投影projection轉換形如的點{x, y}（例如由來源和目標返回的）為兩元素的數字數組；默認的訪問器假定輸入端是一個包含x 和y 兩個屬性的對象，如：
function projection(d) {
return [d.x, d.y];
}
默認的訪問器是兼容D3的布局的，包括：tree、cluster和partition；例如，要產生一個徑向對角線，假定屬性y是以像素為單位，并且x屬性是定義以度為單位的角度，像這樣：
function projection(d) {
var r = d.y, a = (d.x - 90) / 180 * Math.PI;
return [r * Math.cos(a), r * Math.sin(a)];
}
projection 是類似于D3中其他值函數一樣方式被調用的；這個projection 函數需要傳遞兩個參數：當前的source 或target 端（從當前數據d中得到）和當前的索引i；
# d3.svg.diagonal.radial()
…
# diagonal(datum[, index])
根據指定的數據datum返回path的路徑數據字符串；一個可選的index 屬性可以被指定，被用來傳遞給對角線生成器的函數。
* SVG元素部分 咕嚕譯 20141128 00:17:16
* Line部分 咕嚕譯 2014-11-29 04:34:09
* Symbol 部分 咕嚕譯 2014-11-29 8:00
* Chord 部分 咕嚕譯 2014-11-29 8:00
* Area部分 Harry譯 20140419 咕嚕校對 2014-11-29 10:18:17
* Diagonal部分 魏飛 譯 20140418 17.14.18咕嚕校對 2014-11-29 11:06:40
* Arc部分 魏飛 譯 20140716 19-25咕嚕校對2014-11-29 10:49:56
