javascript - 调度拖尾事件
问题描述
我想以编程方式触发 d3-drag 的“结束”事件。我有一些圈子,并像这样实现它们的拖动处理:
...
.call(d3.drag()
.on("drag", function () {...})
.on("end", function () {...})
)
现在,稍后在我的代码中,我想以编程方式触发它的“结束”部分。
我已经尝试过这样的事情:
d3.select("#myID").dispatch("end");
d3.select("#myID").dispatch("dragend");
d3.select("#myID").call(d3.drag().dispatch("end"));
解决方案
如果您不需要生成任何实际的事件数据,并且我正确理解了这个问题,那么您可以相对容易地做到这一点,而无需直接使用 d3.dispatch。下面会给你this
和节点数据本身(在 d3v5 中它也会给你i
and nodes
)。
D3v5 及更早版本
在 d3v5 及更早版本中,传递给selection.each()
和的函数的签名drag.on()
是相同的。在这种情况下,您可以轻松地将函数分配给变量并将其传递给两者。或者,您可以使用drag.on("typeName")
.
这是一个简单的例子:
var svg = d3.select("body")
.append("svg")
.attr("width",500)
.attr("height",300);
var data = [{x:40,y:100},{x:250,y:100}];
var circles = svg.selectAll(null)
.data(data)
.enter()
.append("circle")
.attr("r", 10)
.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; })
.attr("fill", function(d,i) {
return ["steelblue","crimson"][i]
})
var drag = d3.drag()
.on("drag", function(d) {
d.x = d3.event.x; d.y = d3.event.y;
d3.select(this)
.attr("cx", d.x)
.attr("cy", d.y);
})
.on("end", function(d) {
console.log(d.x+","+d.y);
d3.select(this)
.transition()
.attr("r", 30)
.transition()
.attr("r", 10);
})
circles.call(drag);
d3.select("button").on("click", function() {
var circle = d3.select("circle")
.each(drag.on("end"));
})
circle {
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<button>Trigger Drag End On Blue Circle</button>
D3v6
在 d3v6 中,传递给selection.each()
和的函数的签名drag.on()
是不同的。数据是前者的第一个参数,后者的第二个参数。所以我们可以使用 Function.apply() insideselection.each()
来触发结束函数并传递正确的this
和d
同时传递null
事件数据。
var svg = d3.select("body")
.append("svg")
.attr("width",500)
.attr("height",300);
var data = [{x:40,y:100},{x:250,y:100}];
var circles = svg.selectAll(null)
.data(data)
.enter()
.append("circle")
.attr("r", 10)
.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; })
.attr("fill", function(d,i) {
return ["steelblue","crimson"][i]
})
var drag = d3.drag()
.on("drag", drag)
.on("end", dragend)
circles.call(drag);
d3.select("button").on("click", function() {
var circle = d3.select("circle")
.each(function(d) {
dragend.apply(this,[null,d])
})
})
function dragend(event,d) {
console.log(d.x+","+d.y);
d3.select(this)
.transition()
.attr("r", 30)
.transition()
.attr("r", 10);
}
function drag(event,d) {
d.x = event.x; d.y = event.y;
d3.select(this)
.attr("cx", d.x)
.attr("cy", d.y);
}
circle {
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/6.0.0/d3.min.js"></script>
<button>Trigger Drag End On Blue Circle</button>
推荐阅读
- mysql - Laravel 7 迁移 - 创建了外键,但其约束代码不起作用
- c# - 如何在C#中将\"替换为"
- amazon-web-services - 有没有办法使用加密的 AMI 创建启动配置?
- html - 不同的固定背景图像设置到不同的页面
- ios - 在 iPAD 中添加新版本时是否会替换应用程序数据库
- javascript - jsonpath中数组的总和
- r - 在没有完全匹配的情况下将值连接到现有 data.table(在间隔内匹配)
- asp.net-core - ASPNETCore 过滤器从模型中删除 \u0000
- python - 从头开始制作 ML 模型时卡住了
- ant - 无法访问 Bamboo 构建计划中的环境变量