by Observable

外觀

符號 ​

範例 · 符號提供分類形狀編碼，如同散佈圖。符號置中於原點；使用 轉換 將符號移至不同位置。

symbol(type, size) ​

原始碼 · 建構一個新的符號產生器，具有指定的 類型 和 大小。若未指定，類型 預設為圓形，大小 預設為 64。

js
svg.append("path").attr("d", d3.symbol(d3.symbolCross));

symbol(...arguments) ​

原始碼 · 為指定的 arguments 產生一個符號。arguments 是任意的；它們會連同 this 物件傳遞至符號產生器的存取器函式。在預設設定下，呼叫符號產生器會產生一個 64 平方像素的圓形。

js
d3.symbol()() // "M4.514,0A4.514,4.514,0,1,1,-4.514,0A4.514,4.514,0,1,1,4.514,0"

如果符號產生器有一個 context，則符號會以一系列 路徑方法 呼叫的形式呈現在此 context 中，而此函式會傳回 void。否則，會傳回一個 路徑資料 字串。

符號.類型(類型) ​

原始碼 · 如果指定了 類型，會將符號類型設定為指定的函數或符號類型，並傳回此符號產生器。

js
const symbol = d3.symbol().type(d3.symbolCross);

如果 類型 是函數，會傳遞符號產生器的引數和 this。這很適合與 選取.屬性 搭配使用，例如與 序數比例尺 結合使用，以產生分類的符號編碼。

js
const symbolType = d3.scaleOrdinal(d3.symbolsFill);
const symbol = d3.symbol().type((d) => symbolType(d.category));

如果未指定 類型，會傳回目前的符號類型存取器。

js
symbol.type() // () => d3.symbolCross

符號類型存取器預設為

js
function type() {
  return circle;
}

請參閱 symbolsFill 和 symbolsStroke 以取得內建的符號類型。若要實作自訂的符號類型，請傳遞一個實作 symbolType.繪製 的物件。

符號.大小(大小) ​

原始碼 · 如果指定了 大小，會將大小設定為指定的函數或數字，並傳回此符號產生器。

js
const symbol = d3.symbol().size(100);

如果 大小 是函數，會傳遞符號產生器的引數和 this。這很適合與 選取.屬性 搭配使用，例如與 線性比例尺 結合使用，以產生定量的尺寸編碼。

js
const symbolSize = d3.scaleLinear([0, 100]);
const symbol = d3.symbol().size((d) => symbolSize(d.value));

如果未指定 大小，會傳回目前的尺寸存取器。

js
symbol.size() // () => 100

尺寸存取器預設為

js
function size() {
  return 64;
}

符號.內容(內容) ​

原始碼 · 如果指定了 內容，會設定內容並傳回此符號產生器。

js
const context = canvas.getContext("2d");
const symbol = d3.symbol().context(context);

如果未指定 內容，會傳回目前的內容。

js
symbol.context() // context

內容預設為 null。如果內容不是 null，則會將 產生的符號 呈現到此內容中，作為一系列 路徑方法 呼叫。否則，會傳回一個代表產生的符號的 路徑資料 字串。

符號.位數(位數) ​

原始碼 · 如果指定了 位數，會設定小數點後面的最大位數，並傳回此符號產生器。

js
const symbol = d3.symbol().digits(3);

如果未指定 位數，會傳回目前的最大小數位數，預設為 3。

js
symbol.digits() // 3

此選項僅適用於關聯的 內容 為 null 時，例如當此符號產生器用於產生 路徑資料 時。

symbolsFill ​

circlecrossdiamondsquarestartrianglewye

原始碼 · 包含一組設計用於填滿的符號類型的陣列：圓形、十字、菱形、正方形、星星、三角形 和 Y 形。對於使用 序數比例尺 的分類形狀編碼很有用。

js
const symbolType = d3.scaleOrdinal(d3.symbolsFill);

symbolsStroke ​

asteriskcirclediamond2plussquare2timestriangle2

原始碼 · 陣列包含一組專門用於描邊的符號類型：circle、plus、times、triangle2、asterisk、square2 和 diamond2。對於使用 序數比例 進行類別形狀編碼很有用。

js
const symbolType = d3.scaleOrdinal(d3.symbolsStroke);

symbolAsterisk ​

原始碼 · 星號符號類型；用於描邊。

symbolCircle ​

原始碼 · 圓形符號類型；用於填滿或描邊。

symbolCross ​

原始碼 · 希臘十字符號類型，手臂長度相等；用於填滿。

symbolDiamond ​

原始碼 · 菱形符號類型；用於填滿。

symbolDiamond2 ​

原始碼 · 旋轉方形符號類型；用於描邊。

symbolPlus ​

原始碼 · 加號符號類型；用於描邊。

symbolSquare ​

原始碼 · 正方形符號類型；用於填滿。

symbolSquare2 ​

原始碼 · square2 符號類型；用於描邊。

symbolStar ​

原始碼 · 五角星（五芒星）符號類型；用於填滿。

symbolTriangle ​

原始碼 · 向上三角形符號類型；用於填滿。

symbolTriangle2 ​

原始碼 · 向上三角形符號類型；用於描邊。

symbolWye ​

原始碼 · Y 形符號類型；用於填滿。

symbolTimes ​

原始碼 · X 形符號類型；用於描邊。

自訂符號 ​

符號類型通常不會直接使用，而是傳遞給 symbol.type。不過，如果你沒有找到任何內建類型符合你的需求，你可以使用下列介面定義自己的符號類型實作。你也可以將這個低階介面與內建符號類型搭配使用，作為符號產生器的替代方案。

js
const path = d3.pathRound(3);
const circle = d3.symbolCircle.draw(path, 64);
path.toString(); // "M4.514,0A4.514,4.514,0,1,1,-4.514,0A4.514,4.514,0,1,1,4.514,0"

symbolType.draw(context, size) ​

使用指定的 size（以平方像素為單位）將此符號類型繪製到指定的 context。context 實作 CanvasPathMethods 介面。（請注意，這是 CanvasRenderingContext2D 介面的子集！）另請參閱 d3-path。

pointRadial(angle, radius) ​

範例 · 原始碼 · 傳回給定 angle（以弧度為單位）的點 [x, y]，其中 0 位於 -y（12 點鐘），正角順時針進行，以及給定的 radius。

js
d3.pointRadial(Math.PI / 3, 100) // [86.60254037844386, -50]