如何解决如何使用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")
}
})
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。