D3.jsでマルチタッチでの複数個別ドラッグ

ドラッグ可能なオブジェクトをhtmlに記述（今回は画像）
< /body>
<img src="/images/logo.png" class="logo" style="position:absolute;top:10px;left:10px;">
<img src="./images/h01_1.png" class="logo" style="position:absolute;top:10px;left:100px;">
<img src="./images/h01_2.png" class="logo" style="position:absolute;top:80px;left:10px;">
<img src="./images/h01_3.png" class="logo" style="position:absolute;top:80px;left:100px;">
<img src="./images/h01_4.png" class="logo" style="position:absolute;top:10px;left:200px;">


<script src="//d3js.org/d3.v5.min.js" charset="utf-8"></script>
<script>

var drg = d3.drag()
    .on("start", dragstarted)
    .on("drag", dragged)
    .on("end", dragended);//それぞれのドラッグイベントに関数を設定します（もちろんそのまま処理を記載しても問題ありません）。

var svg = d3.select('body').selectAll(".logo").call( drg );//.selectAll部分にドラッグイベントを設定したい要素のセレクタを指定します。
 
//ドラッグスタート時に呼び出される関数
function dragstarted() {
  // 処理を記載
}
 
//ドラッグ中に呼び出される関数
function dragged(d,i) {
    d3.select(this).style("top",d3.event.y +'px');
    d3.select(this).style("left",d3.event.x +'px');

    console.log("dragged: [%s:%s] [%s:%s]", this.left,this.top, d3.event.x,d3.event.y);    
}
 
//ドラッグ終了時に呼び出される関数
function dragended() {
  // 処理を記載
}
</script>