作成者Observableシンボル
例 · シンボルは、散布図などにおけるカテゴリカルな形状エンコーディングを提供します。シンボルは原点を中心に配置されます。transform を使用して、シンボルを別の位置に移動します。
symbol(type, size)
ソースコード · 指定されたtypeとsizeの新しいシンボルジェネレータを構築します。指定しない場合、typeは円、sizeは64にデフォルト設定されます。
svg.append("path").attr("d", d3.symbol(d3.symbolCross));symbol(...arguments)
ソースコード · 指定されたargumentsのシンボルを生成します。argumentsは任意です。シンボルジェネレータのアクセッサ関数に、thisオブジェクトと共に渡されます。デフォルト設定では、シンボルジェネレータを呼び出すと、64平方ピクセルの円が生成されます。
d3.symbol()() // "M4.514,0A4.514,4.514,0,1,1,-4.514,0A4.514,4.514,0,1,1,4.514,0"シンボルジェネレータにcontextがある場合、シンボルはpathメソッドのシーケンスとしてこのコンテキストにレンダリングされ、この関数はvoidを返します。それ以外の場合は、パスデータ文字列が返されます。
symbol.type(type)
ソースコード · typeが指定されている場合、シンボルの型を指定された関数またはシンボルの型に設定し、このシンボルジェネレータを返します。
const symbol = d3.symbol().type(d3.symbolCross);typeが関数の場合、シンボルジェネレータの引数とthisが渡されます。selection.attrと共に使用する場合、たとえば順序スケールと組み合わせてカテゴリカルなシンボルエンコーディングを作成する際に便利です。
const symbolType = d3.scaleOrdinal(d3.symbolsFill);
const symbol = d3.symbol().type((d) => symbolType(d.category));typeが指定されていない場合、現在のシンボルの型アクセッサを返します。
symbol.type() // () => d3.symbolCrossシンボルの型アクセッサは、デフォルトで以下になります。
function type() {
return circle;
}symbolsFillとsymbolsStrokeを参照して、組み込みのシンボルタイプを確認してください。カスタムシンボルタイプを実装するには、symbolType.drawを実装するオブジェクトを渡します。
symbol.size(size)
ソースコード · sizeが指定されている場合、サイズを指定された関数または数値に設定し、このシンボルジェネレータを返します。
const symbol = d3.symbol().size(100);sizeが関数の場合、シンボルジェネレータの引数とthisが渡されます。selection.attrと共に使用する場合、たとえば線形スケールと組み合わせて定量的なサイズエンコーディングを作成する際に便利です。
const symbolSize = d3.scaleLinear([0, 100]);
const symbol = d3.symbol().size((d) => symbolSize(d.value));sizeが指定されていない場合、現在のサイズアクセッサを返します。
symbol.size() // () => 100サイズアクセッサは、デフォルトで以下になります。
function size() {
return 64;
}symbol.context(context)
ソースコード · contextが指定されている場合、コンテキストを設定し、このシンボルジェネレータを返します。
const context = canvas.getContext("2d");
const symbol = d3.symbol().context(context);contextが指定されていない場合、現在のコンテキストを返します。
symbol.context() // contextコンテキストはデフォルトでnullです。コンテキストがnullでない場合、生成されたシンボルはpathメソッドのシーケンスとしてこのコンテキストにレンダリングされます。それ以外の場合は、生成されたシンボルを表すパスデータ文字列が返されます。
symbol.digits(digits)
ソースコード · digitsが指定されている場合、小数点以下の最大桁数を設定し、このシンボルジェネレータを返します。
const symbol = d3.symbol().digits(3);digitsが指定されていない場合、現在の最大小数桁数（デフォルトは3）を返します。
symbol.digits() // 3このオプションは、関連付けられたcontextがnullの場合、つまりこのシンボルジェネレータがパスデータを生成するために使用される場合にのみ適用されます。
symbolsFill
ソースコード · 塗りつぶし用に設計されたシンボルタイプのセットを含む配列：circle、cross、diamond、square、star、triangle、wye。順序スケールによるカテゴリカルな形状エンコーディングに役立ちます。
const symbolType = d3.scaleOrdinal(d3.symbolsFill);symbolsStroke
ソースコード · ストローク用に設計されたシンボルタイプのセットを含む配列：circle、plus、times、triangle2、asterisk、square2、diamond2。順序スケールによるカテゴリカルな形状エンコーディングに役立ちます。
const symbolType = d3.scaleOrdinal(d3.symbolsStroke);symbolAsterisk
ソースコード · アスタリスクシンボルタイプ。ストローク用。
symbolCircle
ソースコード · 円シンボルタイプ。塗りつぶしまたはストロークのいずれにも使用できます。
symbolCross
ソースコード · ギリシャ十字シンボルタイプ。腕の長さはすべて同じです。塗りつぶし用。
symbolDiamond
ソースコード · ひし形シンボルタイプ。塗りつぶし用。
symbolDiamond2
ソースコード · 回転した正方形シンボルタイプ。ストローク用。
symbolPlus
ソースコード · プラス記号シンボルタイプ。ストローク用。
symbolSquare
ソースコード · 正方形シンボルタイプ。塗りつぶし用。
symbolSquare2
ソースコード · square2シンボルタイプ。ストローク用。
symbolStar
ソースコード · 五芒星（ペンタグラム）記号タイプ。塗りつぶしを目的としています。
symbolTriangle
ソースコード · 上向きの三角形記号タイプ。塗りつぶしを目的としています。
symbolTriangle2
ソースコード · 上向きの三角形記号タイプ。枠線を引くことを目的としています。
symbolWye
ソースコード · Y字型の記号タイプ。塗りつぶしを目的としています。
symbolTimes
ソースコード · X字型の記号タイプ。枠線を引くことを目的としています。
カスタムシンボル
シンボルタイプは通常直接使用されず、symbol.type に渡されます。ただし、組み込みのタイプがニーズを満たさない場合は、以下のインターフェースを使用して独自のシンボルタイプ実装を定義できます。組み込みのシンボルタイプでも、シンボルジェネレーターの代替としてこの低レベルインターフェースを使用できます。
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（0は-y（12時）で、正の角度は時計回りに進む）と指定されたradiusに対して、点[x, y]を返します。
d3.pointRadial(Math.PI / 3, 100) // [86.60254037844386, -50]