Question

解决问题==使用d3.drag（）而不是d3.behaviour.drag（）并使用d3-drag.v1.min.js

我已经设置了一个带有D3js的SVG棋盘，使用for循环遍历每一行和每一列。我使用unicode作为棋子，因此每个棋子都是一个svg元素。

我试图用D3js的拖动行为拖动棋子，但不可能。

所有国际象棋棋子都有“可拖动”等级。所以我创建了拖动并将其附加到类“draggable”

的所有元素

 var drag = d3.behavior.drag()
    .origin(function() { 
       var t = d3.select(this);
       return {x: t.attr("x"), y: t.attr("y")};
    })
    .on("dragstart", function() {
       d3.event.sourceEvent.stopPropagation(); // silence other listeners
    })
    .on("drag", function(d,i) {
        d3.select(this)
        .attr("x", d3.event.x)
        .attr("y", d3.event.y);
    });

 d3.selectAll(".draggable").call(drag);

我的完整代码在http://codepen.io/linhnt1516/pen/ZeGoNj?editors=0011

另外，我尝试在其他示例中使用与svg元素相同的拖动功能。查看此代码笔http://codepen.io/linhnt1516/pen/VpvobE?editors=0011并拖动文本和框。

我一直在研究D3js的大量拖曳示例，但它们都不适用于棋子案例。

任何人都有任何解决方案或想法可能会出现问题。

Answer 1

我还没有完全理解D3 v4和D3 v3拖动行为之间的差异或者使用behaviour.drag（）

的实际问题是什么

在我使用D3 v3并设置之前

var drag = d3.behaviour.drag()

这不像问题中描述的那样有效。

但是我找到了支持d3的脚本d3-drag.v1.min.js

 <script src="https://d3js.org/d3.v4.min.js" charset="utf-8"></script>

所以当我添加这个并设置

时

var drag = d3.drag()

拖拽的详细代码与上面相同，只是不同的初始化语法。拖动功能现在可以正常工作。如果有人知道为什么.behaviour.drag（）不起作用，我的旧代码和新工作代码之间的实际差异是什么，请赐教。

D3js：无法将拖拽行为设置为国际象棋棋子

1 个答案: