Javascript 使用d3可视化快速射击';点击';

Javascript 使用d3可视化快速射击';点击';,javascript,d3.js,mouseevent,visualization,Javascript,D3.js,Mouseevent,Visualization,我试图在用户按住鼠标按钮时实现某种可视化。就像在第一人称射击游戏中,你有一个自动武器,你可以按住鼠标按钮,它仍然开火。在本例中,我将使用d3在画布上生成lets say圆。因此,如果用户在画布上单击并按住,一组圆圈将添加到DOM中,并将继续添加,直到它们松开为止。目前,这是我尝试过的: var drag = d3.behavior.drag() .on('dragstart', function () { d3.event.sourceEvent.stopPropagation();

我试图在用户按住鼠标按钮时实现某种可视化。就像在第一人称射击游戏中,你有一个自动武器,你可以按住鼠标按钮,它仍然开火。在本例中,我将使用d3在画布上生成lets say圆。因此,如果用户在画布上单击并按住,一组圆圈将添加到DOM中,并将继续添加,直到它们松开为止。目前,这是我尝试过的:

var drag = d3.behavior.drag()
.on('dragstart', function () {
    d3.event.sourceEvent.stopPropagation();
    d3.event.sourceEvent.preventDefault(); })
.on('drag', function (d) {
  console.log('dragging')
});
这很好,我在控制台中看到了大量的“拖拽”,但是由于我需要调用一个与类关联的函数,我在传递正确的This上下文以便调用所述函数时遇到了问题。我总是遇到错误“找不到未定义的属性“X”,这很有道理。如何/可能在上下文中传递到d3拖动行为


这有点可笑,因为我找的大多数帖子都是关于删除多个点击或者多个点击正在触发的

您可以在mousedown事件中使用
setInterval
执行此操作,而在mouseup中,您可以删除间隔

请看一下这个演示。就是这样,添加了单击行为

代码可以改进,因为我认为它在每次单击时都会重新创建节点映射,最好将新节点添加到数据中,而只将新节点添加到force布局中

var宽度=500,
高度=300;
var newNode=函数(){
返回{
半径:Math.random()*12+4
};
},
节点=d3.范围(20).映射(新节点),
根=节点[0],
颜色=d3.scale.category10();
根半径=0;
root.fixed=true;
var-force=d3.layout.force()
.重力(0.05)
.充电(功能(d,i){
返回i?0:-2000;
})
.节点(节点)
.尺寸([宽度、高度]);
force.start();
var svg=d3.选择(“正文”).追加(“svg”)
.attr(“宽度”,宽度)
.attr(“高度”,高度);
var update=函数(){
svg.selectAll(“圆圈”)
.data(节点)/.slice(1))
.enter().append(“圆”)
.attr(“r”,函数(d){
返回d.radius;
})
.样式(“填充”,功能(d,i){
返回颜色(i%3);
});
};
更新();
强制开启(“勾选”),功能(e){
var q=d3.几何四叉树(节点),
i=0,
n=节点长度;
而(++inx2 | x2ny2 | y2


我不清楚你想做什么。您已经向我们展示了一些有效的代码,您是否可以添加一些代码来显示您尝试执行的操作和无效的操作?谢谢!这就是我要找的。我希望不使用设置间隔,但这应该可以做到。