时间戳

首页 > 解决方案 > 使用 d3 v4 拖动功能闪烁翻译

javascript - 使用 d3 v4 拖动功能闪烁翻译

问题描述

代码在observablehq上可见且可修改

我正在尝试将 d3 v4 版本的新拖放与翻译（在 SO 上找到）适应我在 observableHQ 上的示例，但没有成功。

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

如果你知道为什么？

标签： javascriptd3.jssvg

解决方案

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

但要小心，因为您没有考虑到内部的偏移量<g>（很难描述）。也许您必须在<g>.

d3.event恕我直言，无论如何我宁愿使用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);
 }

推荐阅读