如何使用d3.js正确拖动？

问题描述

我正在使用d3.js和Vue js创建楼层地图。我想添加一个功能，用户单击一个按钮即可创建一个矩形（门口），用户可以更改比例和X，Y位置。我对vue js和d3.js相当陌生，因此我使用this作为参考。该按钮起作用，并为X次按下添加X次矩形。但是，当我添加第一个门口并尝试拖动矩形时，它完全偏离了用户的鼠标坐标。此外，当我添加第二，第三，第四等矩形时，我无法更改其位置，只能更改第一个矩形。我认为这是因为我仅在拖动功能中选择了一个矩形。但是我更关心如何在矩形上正确拖动。有人可以为我指出正确的方向吗？

a.merge(b,on='t',how='left').merge(c,how='left')

<template>
  <div id = "app">

    <header>
      <Navbar />
    </header>

      <div class = "floor"> 
        <div id = "tooltip"></div>
        <svg width = "850" height = "800">
        </svg>
      </div>
    
    <div class = "buttons"> 
      <button v-on:click="addRec()"> Add Doorway </button>
    </div>

    
  </div>
</template>

解决方法

您的代码中有两个问题：

您只能选择相同的矩形：

所有拖动功能都使用：

d3.select("rect")

这将选择DOM中的第一个匹配元素。这将始终是相同的矩形，并不对应于被拖动的矩形。相反，您可以使用以下命令访问适当的矩形：

function dragFunction() {
  d3.select(this);
}

在d3v5及更早版本中，如果this不可用，则可以使用：

dragFunction(d,i,nodes) => d3.select(nodes[i])

如果您无法访问this，那么在d3v6中，还没有一种获得矩形的好方法-migration guide显示了一种获取{{1}的“旧方法” }，涉及为基准匹配过滤元素。我从未见过在d3v5或更早版本中使用的方法，如果this不可用，d3.select(nodes[i])总是后备。因此，理想情况下，您可以访问this-不要为侦听器使用箭头功能

您通过x，y应用变换和位置。

最初添加矩形时，将其定位为x，y。拖动时，应用平移，但不要删除初始的x，y位置。这将导致两次应用x，y坐标，一次使用其原始值，一次使用相对于原点（而不是其起始位置）的拖动值。您应该为初始放置和拖动修改相同的属性-x，y属性或变换，但不要同时使用这两个属性。

D3v5

在使用d3.event.x和d3.event.y的同时（d3v6中添加了d3.pointer），我进行了上述更改，并相信已在下面创建了预期的效果。

this

var svg = d3.select("body")
  .append("svg")
  .attr("width",500)
  .attr("height",300);
  
d3.select("button")
  .on("click",function() {
  
   svg.append("rect")
      .attr("width",10)
      .attr("height",25)
      .attr("x",150)
      .attr("y",100)
      .attr("fill","#1b1c3b")
      .attr("opacity",".5")
      .attr("stroke","black")
      .attr("stroke-width","2")
      .attr("cursor","move")
      .call(d3.drag()
        .on('start',dragStart)
        .on('drag',dragging)
        .on('end',dragEnd)
      )
  
    function dragStart(d,nodes){
        d3.select(nodes[i])
          .style("stroke","red")  
      }
      
    function dragging(d,nodes){
        var xCoor = d3.event.x;
        var yCoor = d3.event.y;

        d3.select(nodes[i])
          .attr("x",xCoor)
          .attr("y",yCoor);
      }
      
      function dragEnd(d,nodes){
         d3.select(nodes[i])
          .style("stroke","black")
      }
  
  
  
  })

D3v6

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<button>Add Rect</button>

var svg = d3.select("body")
  .append("svg")
  .attr("width",dragEnd)
      )
  
    function dragStart(event,d){
        d3.select(this)
          .style("stroke","")  
      }
      
    function dragging(event,d){
        var xCoor = event.x;
        var yCoor = event.y;

        d3.select(this)
          .attr("x",yCoor);
      }
      
      function dragEnd(event,"black")
      }
  
  })

drag javascript