D3.js-ドラッグAPI

ドラッグアンドドロップは、d3.jsで最もよく知られている概念の1つです。この章では、ドラッグとその方法について詳しく説明します。

インストール

次のスクリプトを使用して、ドラッグAPIを直接含めることができます。

<script src = "https://d3js.org/d3-dispatch.v1.min.js"></script>
<script src = "https://d3js.org/d3-selection.v1.min.js"></script>
<script src = "https://d3js.org/d3-drag.v1.min.js"></script>

APIメソッドのドラッグ

以下は、D3.jsで最も重要なドラッグAPIメソッドの一部です。

d3.drag（）
ドラッグ（選択）
drag.container（[コンテナ]）
drag.filter（[フィルター]）
drag.subject（[subject]）
drag.clickDistance（[距離]）
drag.on（typenames、[listener]）
d3.dragDisable（window） *d3.dragEnable（window [、noclick]）

これらのそれぞれを詳細に理解しましょう。

d3.drag（）

このメソッドは、新しいドラッグを作成するために使用されます。次のスクリプトを使用して、このメソッドを呼び出すことができます。

<script>
   var drag = d3.drag();
</script>

ドラッグ（選択）

このメソッドは、指定した選択にドラッグを適用するために使用されます。* selection.call *を使用してこの関数を呼び出すことができます。簡単な例を以下に定義します。

d3.select(".node").call(d3.drag().on("drag", mousemove));

ここでは、選択した要素に適用されるドラッグ動作はselection.callを介しています。

drag.container([container])

ドラッグのために指定された関数にコンテナを設定するために使用されます。コンテナが指定されていない場合、現在のアクセサが返されます。 Canvasでグラフィック要素をドラッグするには、コンテナをそれ自体として再定義できます。以下に定義されています。

function container() {
   return this;
}

drag.filter（[フィルター]）

指定された関数のフィルターを設定するために使用されます。フィルターが指定されていない場合、以下に定義されているように現在のフィルターを返します。

function filter() {
   return !d3.event.button;
}

drag.subject（[subject]）

これは、サブジェクトをドラッグ用に指定された関数に設定するために使用され、以下で定義されます。

function subject(d) {
   return d = =  null ? {x: d3.event.x, y: d3.event.y} : d;
}

ここで、件名はドラッグされているものを表します。たとえば、SVGで長方形要素をドラッグする場合、デフォルトの件名はドラッグされる長方形のデータムです。

drag.clickDistance（[距離]）

このメソッドは、mousedownおよびmouseupイベントをクリックするための最大距離を設定するために使用されます。距離が指定されていない場合、ゼロを指します。

drag.on（typenames、[listener]）

このメソッドは、ドラッグするために指定されたタイプ名のイベントリスナーを設定するために使用されます。タイプ名は、空白で区切られた1つ以上のタイプ名を含む文字列です。各タイプ名はタイプであり、オプションでピリオド（。）と名前（drag.oneやdrag.twoなど）が続きます。このタイプは、次のいずれかからでなければなりません-

start -新しいポインタを開始します。
drag -アクティブなポインターをドラッグします。
end -アクティブでないアクティブなポインタ。

d3.dragDisable（window）

このメソッドは、ドラッグアンドドロップ選択を無効にするために使用されます。 mousedownイベントアクションを防ぎます。選択したブラウザのほとんどは、デフォルトでこのアクションをサポートしています。サポートされていない場合は、CSSプロパティをnoneに設定できます。

d3.dragEnable（window [、noclick]）

このメソッドは、指定されたウィンドウ位置でのドラッグアンドドロップ選択を有効にするために使用されます。 mouseupイベントアクションを呼び出すために使用されます。 noclick値をtrueに割り当てると、クリックイベントはゼロミリ秒のタイムアウトで期限切れになります。

ドラッグAPI-ドラッグイベント

D3.eventメソッドは、ドラッグイベントを設定するために使用されます。それは次のフィールドで構成されています-

ターゲット-ドラッグ動作を表します。
タイプ-これは文字列で、次のいずれかです。「開始」、「ドラッグ」または「終了」。
Subject -drag.subjectによって定義されるドラッグサブジェクト。

event.on（typenames、[listener]）

イベントオブジェクトは、ドラッグを実行するevent.onメソッドを公開します。次のように定義されています。

d3.event.on("drag", dragged).on("end", ended);

D3js-dragging-api

目次