Javascript 如何在D3.js中创建缩放、拖动函数，而不使用默认调用函数D3.behavior.Zoom（）和D3.behavior.Drag（）

我一直在force layout中使用D3.js graph。我一直在使用带有javascript语言的Leap Motion设备

我的问题是，我无法创建缩放和拖动函数，这些函数不使用为鼠标编写的默认方法，如d3.behavior.Zoom（）、d3.behavior.drag（）

例如，我有这种缩放方法：

 function zoom(graph) {
    graph.zoom =
        d3.behavior.zoom()
            .x(graph.x)
            .y(graph.y)
            .scaleExtent([0.1, 10])
            .on("zoom", function () {
                if (d3.event) {
                    graph.scale = d3.event.scale;
                    graph.translate = d3.event.translate;
                    graph.scaledNormalLength = graph.defaultNormalLength / graph.scale;
                }

                d3.select("svg").selectAll(".router").each(function (d) {
                    if ((graph.scale <= graph.zoomShrinkCondition && d.physicalRole == "router") || (graph.scale > graph.zoomShrinkCondition && d.physicalRole == "cloud"))
                        if (d.locked == undefined || !d.locked) {
                            graph.nodeZoom(d);
                        }
                });

                //remove tooltip
                graph.mouseOut();
                //calculate positions - graph will freeze without this
                graph.tick();


            });
}

---

有没有办法在不调用d3.behavior函数的情况下创建此方法？非常感谢您的想法。

您不调用默认函数的目的是什么？我想创建缩放函数，它与我在这里展示的缩放（图形）函数具有相同的效果。但我不能使用行为函数，因为我不使用鼠标进行控制。我想使用跳跃运动来滚动图形。我还想创建一个拖动功能，它可以在不同的位置移动图形，而不用鼠标。只有跳跃运动。你认为有可能吗？我认为d3.js库没有我在这里可以使用的任何函数。我的图形不会像您在示例中所做的那样模拟手指的位置。My graph simulate network topology（我的图形模拟网络拓扑）和hands（手动）仅用于控制，不用于创建图形内容。您不需要为此创建自己的图形，只需禁用不需要的事件侦听器即可。见例。

function drag(graph) {
    graph.drag =
        d3.behavior.drag()
            .on("dragstart", function (d) {
                d.fixed = true;
                d3.select(this).classed("fixed", true);
                d3.event.sourceEvent.stopPropagation();
            })
            .on("drag", function (d) {
                //remove tooltip
                graph.mouseOut();

                //compute coordinates of dragged node (NOTE: if some coordinates are wrong, it is probably because of simulate() function)
                d.px += d3.event.dx / graph.scale;
                d.py += d3.event.dy / graph.scale;

                //compute coordinate of children if they are not hidden
                if (d.physicalRole == "router") {
                    setNodePosition(d, d3.event);
                }

                //compute coordinates of children if they are hidden
                if (d.physicalRole == "cloud") {
                    d._children.forEach(function (ch) {
                        ch.px += d3.event.dx / graph.scale;
                        ch.py += d3.event.dy / graph.scale;
                        setNodePosition(ch, d3.event);
                    });
                }
                graph.getForce().resume()
            });

    function setNodePosition(node, event) {
        if (node.children)
            node.children.forEach(function (ch) {
                setNodePosition(ch, event);
                ch.px += event.dx / graph.scale;
                ch.py += event.dy / graph.scale;
            })
    }
}