使用 d3 可视化快速射击的“点击”

Using d3 to visualize rapid fire 'clicks'

本文关键字：点击 射击 d3 可视化 使用      更新时间：2023-09-26

我正在尝试在用户按住鼠标按钮时实现某种可视化。就像在第一人称射击游戏中，您拥有自动武器一样，您可以按住鼠标按钮并保持射击状态。相反，在这种情况下，我将使用 d3 来生成画布上的圆圈。因此，如果用户单击并按住画布，一堆圆圈将被添加到 DOM 中，并将继续添加，直到它们松开。目前，这是我尝试过的：

var drag = d3.behavior.drag()
.on('dragstart', function () {
    d3.event.sourceEvent.stopPropagation();
    d3.event.sourceEvent.preventDefault(); })
.on('drag', function (d) {
  console.log('dragging')
});

这工作正常，我在控制台中看到一堆"拖动"，但由于我需要调用与类关联的函数，因此我在适当的上下文中传递时遇到问题，以便我可以调用所述函数。我总是收到错误"找不到未定义的属性'X'"，这是非常有意义的。如何/是否可以在上下文中传递给 d3 拖动行为？

这有点有趣，因为我寻找的大多数帖子总是关于删除多次点击或多次点击正在触发。

您可以在

鼠标按下事件中使用setInterval来执行此操作，在鼠标向上时，您可以删除间隔。

请看一下这个演示jsFiddle。这是添加了点击行为的演示。

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

var width = 500,
  height = 300;
var newNode = function() {
    return {
      radius: Math.random() * 12 + 4
    };
  },
  nodes = d3.range(20).map(newNode),
  root = nodes[0],
  color = d3.scale.category10();
root.radius = 0;
root.fixed = true;
var force = d3.layout.force()
  .gravity(0.05)
  .charge(function(d, i) {
    return i ? 0 : -2000;
  })
  .nodes(nodes)
  .size([width, height]);
force.start();
var svg = d3.select("body").append("svg")
  .attr("width", width)
  .attr("height", height);
var update = function() {
  svg.selectAll("circle")
    .data(nodes) //.slice(1))
    .enter().append("circle")
    .attr("r", function(d) {
      return d.radius;
    })
    .style("fill", function(d, i) {
      return color(i % 3);
    });
};
update();
force.on("tick", function(e) {
  var q = d3.geom.quadtree(nodes),
    i = 0,
    n = nodes.length;
  while (++i < n) q.visit(collide(nodes[i]));
  svg.selectAll("circle")
    .attr("cx", function(d) {
      return d.x;
    })
    .attr("cy", function(d) {
      return d.y;
    });
});
var intervalId = null,
  pos = null;
var addNewNode = function() {
  var nextNode = newNode();
  nextNode.x = pos[0];
  nextNode.y = pos[1];
  nodes.push(nextNode);
  d3.select('#debug').text('pos x=' + pos[0] + ',y=' + pos[1] + '-nodes=' + nodes.length);
  update();
  force.start();
};
svg.on('mousedown', function() {
    //console.log('down');
    //addNewNode(this);
    pos = d3.mouse(this);
    intervalId = setInterval(addNewNode, 100);
  })
  .on('mouseup', function() {
    //console.log('up');
    clearInterval(intervalId);
  })
  .on("mousemove", function() {
    pos = d3.mouse(this);
    root.px = pos[0];
    root.py = pos[1];
    force.resume();
  })
  .on("mouseleave", function() {
    if (intervalId) clearInterval(intervalId);
  });
function collide(node) {
  var r = node.radius + 16,
    nx1 = node.x - r,
    nx2 = node.x + r,
    ny1 = node.y - r,
    ny2 = node.y + r;
  return function(quad, x1, y1, x2, y2) {
    if (quad.point && (quad.point !== node)) {
      var x = node.x - quad.point.x,
        y = node.y - quad.point.y,
        l = Math.sqrt(x * x + y * y),
        r = node.radius + quad.point.radius;
      if (l < r) {
        l = (l - r) / l * .5;
        node.x -= x *= l;
        node.y -= y *= l;
        quad.point.x += x;
        quad.point.y += y;
      }
    }
    return x1 > nx2 || x2 < nx1 || y1 > ny2 || y2 < ny1;
  };
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id="debug"></div>

相关文章：