相关疑难解决方法(0)

我正在尝试使用d3.js的d3.behavior.drag() drag事件来更新我的数据模型(不立即设置元素位置),然后运行我的"绘图"功能,根据更新的模型更新所有元素.另外,我正在使用transform包含组元素的翻译来移动与拖动对象相关联的所有元素(我从下面链接的示例中删除了额外的元素).这会导致拖动的元素在拖动时停滞不前,拖动它的速度越快,效果越差.

请参阅jsFiddle上的这个精简示例.

这是示例的代码:

blocks = [
  { x: 0, y: 0 }
];

drag = d3.behavior.drag()
  .origin(Object)
  .on("drag", function(d) {
    d.x = d3.event.x;
    d.y = d3.event.y;
    draw();
  });

svg = d3.select("body")
  .append("svg:svg")
  .attr("width", 600)
  .attr("height", 600);

function draw() {
  g = svg.selectAll("g")
    .data(blocks);

  gEnter = g.enter().append("g");

  g.attr("transform", function(d) { return "translate("+d.x+","+d.y+")"; });

  gEnter.append("rect")
    .attr("height", 100)
    .attr("width", 100)
    .call(drag);
}

draw()?;

我得到的印象是这个问题很简单,没有人费心去做它的演示,但是我还不知道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)