使用 d3 v4 拖動功能閃爍翻譯

Question

完整的代碼在observablehq上是可見和可修改的

相關部分：

  const columns = svg.selectAll("g")
                    .data(nested_city)
                    .enter()
                    .append("g")
                    .attr("city", function(d) { return d.key ;})
                    .attr("x",  function(d) { return x(d.key) ;})
                    .attr("y", "0")
                    .attr("transform",  function(d) { return "translate(" + x(d.key) + ",0)" ;})
                    .attr("class", "column")
                   .on("mouseover", function(d) {
                      d3.select(this)
                        .style("cursor","pointer");
                  })
                  .on("mouseout", function(d){
                    d3.select(this)
                      .style("cursor","default");
                  })
                    .call(d3.drag()
                    .subject(function() { 
                            var t = d3.select(this);
                            var tr = getTranslation(t.attr("transform"));
                            return {x: t.attr("x") + tr[0],
                                    y: t.attr("y") + tr[1]};
                     })
                    .on("start", dragstarted)
                    .on("drag", dragged)
                    .on("end", dragended)); 

和拖動處理程序：

      function dragstarted(d) {
       
        d3.select(this).raise().classed("active", true);
      }

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

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

我正在嘗試將 d3 v4 版本的新拖放與翻譯（ 在 SO 上找到）適應我在 observableHQ 上的示例，但沒有成功。

當我拖動兩列中的任何一列（在舊 x 值和新 x 值跳轉之間交替）時，我有一個非常奇怪的閃爍行為。

如果你知道為什么？

Answer 1

在dragged()函數中有一個d3.mouse(this)語句。 這將返回當前事件相對於指定容器 ( 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);
 }