使用d3 v4拖动功能进行闪烁的翻译

Question

该代码在observablehq

上可见并可以修改

我正在尝试将d3 v4版本的新的带翻译的拖放操作（found here on SO）适配到我在observableHQ上的示例，但没有成功。

当我拖动两列中的任何一列时，我会有一个非常奇怪的闪烁行为（在具有旧x值和新x值的跳转之间交替）。

如果您知道为什么？

Answer 1

d3.mouse(this)函数中有一个dragged()语句。这将返回当前事件相对于指定容器（ref）的x和y坐标。 mouse(<container>)的容器是this，表示拖动的<g>元素。但这应该是<svg>。因此，您应该改用d3.mouse(svg.node())。

但是要小心，因为您尚未考虑<g>内的偏移量（很难描述）。也许您必须在<g>内添加光标位置的坐标。

恕我直言，我还是比起d3.event example更喜欢使用d3.mouse。

编辑：具有正确坐标的新拖动功能

// New: Coordinates inside <g>
var coordG = 0;

function dragstarted(d) {

    // New: Read out coordinates inside <g>
    coordG = d3.mouse(this)[0];
    d3.select(this).raise().classed("active", true);
}

function dragged(d) {
    d3.select(this).attr("transform", function(d,i){
        var coordinates = d3.mouse(svg.node());
        var mx = coordinates[0] - coordG;
        console.log( coordG);
        return "translate(" + [mx,0] + ")";
    });
 }

 function dragended(d) {
     d3.select(this).classed("active", false);
 }