d3.js - 当我拖动一个点时更新图形

Question

我正在使用 d3 制作最适合的应用程序线，我希望在拖动点时更新最适合的线。我得到它的工作，所以当你的拖动结束时，线会自行更新。但是，在拖动点时实际更新时，我无法这样做。

这是我的拖动功能：

 var move =  d3.behavior.drag()
                .on("drag",drag)
                .on("dragend",function(){
                    dict.length = 0;
                    var dragPoint = d3.select(this);
                    var newX = x_scale2(parseInt(dragPoint.attr("cx")));
                    var newY = y_scale2(parseInt(dragPoint.attr("cy")));

                    model.replace_point(dragPoint.attr("id"),newX,newY);
                    updateDisplay();


            });

  function drag(){
      var dragPoint = d3.select(this);
      dragPoint
    .attr("cx",function(){return d3.event.dx + parseInt(dragPoint.attr("cx"));})
    .attr("cy",function(){return d3.event.dy +parseInt(dragPoint.attr("cy"));})
        }

**任何有关如何实现我的目标的帮助将不胜感激**

Answer 1

您可以在拖动功能中包含您的“更新代码”。
然后每次触发拖动事件时都会更新该行。这意味着每次点的位置发生变化。

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

function drag() {
    var dragPoint = d3.select(this);
    dragPoint
        .attr("cx", d3.event.dx + parseInt(dragPoint.attr("cx")))
        .attr("cy", d3.event.dy + parseInt(dragPoint.attr("cy")));
    var newX = x_scale2(parseInt(dragPoint.attr("cx")));
    var newY = y_scale2(parseInt(dragPoint.attr("cy")));
    model.replace_point(dragPoint.attr("id"), newX, newY);
    updateDisplay();
}