d3.js - 如何在 D3 中单击以添加或拖动？

Question

我的印象是这个问题是如此简单，没有人愿意对其进行演示，但我对 D3 的了解还不够(还)，无法看出我做错了什么。我正在寻找的行为是，如果用户点击没有圆圈的地方，它会在那里创建一个，如果他们拖动现有的圆圈，则不会创建新的圆圈，但他们拖动的圆圈会移动。

我目前的尝试如下

points = []

drag = d3.behavior.drag()
  .origin((d) -> d)
  .on("dragstart", dragstarted)
  .on("dragend", dragended)

dragstarted = (d) ->
  d3.event.sourceEvent.stopPropagation
  d3.select(this).classed("dragging", true)

dragended = (d) ->
  d3.select(this).classed("dragging", false)

mousedown = ->
  return if d3.event.defaultPrevented
  point = d3.mouse(this)
  points[points.length] = {x: point[0], y: point[1]}
  svg.selectAll("circle").data(points).enter().append("circle")
                                                .attr("cx", (n) -> n.x)
                                                .attr("cy", (n) -> n.y)
                                                .attr("r", "5")
                                                .attr("class", "dot")
                                                .call(drag)

svg = d3.select("body").append("svg")
                         .attr("width", 700)
                         .attr("height", 400)
                         .on("mousedown", mousedown)

Answer 1

首先，您肯定对如何在 mousedown 上加分有正确的想法。 .我要改变的两件事是:

使用 click而不是 mousedown ，因此如果您单击现有点，则不会在现有点的顶部添加新点。

一次添加一个点，而不是重新添加每个 click 上的所有点.

这是一个工作 click功能:

function click(){
  // Ignore the click event if it was suppressed
  if (d3.event.defaultPrevented) return;

  // Extract the click location\    
  var point = d3.mouse(this)
  , p = {x: point[0], y: point[1] };

  // Append a new point
  svg.append("circle")
      .attr("transform", "translate(" + p.x + "," + p.y + ")")
      .attr("r", "5")
      .attr("class", "dot")
      .style("cursor", "pointer")
      .call(drag);
}

那么，拖动的时候，最简单的就是移动一个 circle使用 translate (这也是为什么我
使用 translate在上面创建点时)。唯一真正的步骤是提取拖动的 x和 y地点。这是 drag 的工作示例行为。

var drag = d3.behavior.drag()
    .on("drag", dragmove);

function dragmove(d) {
  var x = d3.event.x;
  var y = d3.event.y;
  d3.select(this).attr("transform", "translate(" + x + "," + y + ")");
}

我把所有这些放在一起 jsfiddle .

最后，这是我在构建拖动示例时阅读的相关 SO 问题: How to drag an svg group using d3.js drag behavior? .