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(selection)
• drag.container([container])
• drag.filter([filter])
• drag.subject([subject])
• drag.clickDistance([distance])
• 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（[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]）

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

• start −新しいポインタを開始します。

• drag −アクティブなポインタをドラッグします。

• end −アクティブなポインタを非アクティブにします。

d3.dragDisable（window）

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

d3.dragEnable（window [、noclick]）

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

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

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

• Target −ドラッグ動作を表します。

• Type −これは文字列であり、「開始」、「ドラッグ」、「終了」のいずれかになります。

• Subject −drag.subjectで定義されたドラッグサブジェクト。

event.on（typenames、[listener]）

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

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