Question

我已使用以下代码（代码段）为我的图表添加了缩放功能：

zoomed = () => {
    svg.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
};

zoom = d3.behavior.zoom()
    .scaleExtent([0.3, 1.5])
    .on("zoom", zoomed);

svg = d3.select("body")
    .append("svg:svg")
    .attr("width", width)
    .attr("height", height)
    .call(zoom)
    .append('svg:g');

这可以按预期工作。我可以缩放或平移整个图表。但是，我无法再影响节点的位置，因为任何＆＃34;点击＆＃34;触发平移。

我的拖动定义如下：

dragStart = function(d) {
    d.fixed = true;
};

drag = d3.drag()
    .on("dragstart", dragStart);

node = svg.selectAll(".node")
    .data(graph.nodes)
    .enter()
    .append("rect")
    .attr("class", "node")
    .attr("width", function (d) { return d.width - 2 * pad; })
    .attr("height", function (d) { return d.height - 2 * pad; })
    .attr("rx", 5).attr("ry", 5)
    .call(drag);

我不确定我做错了什么但是我的实现与我能找到的具有类似功能的所有示例一致。任何帮助将不胜感激。

Answer 1

我最终通过在缩放时禁用点击事件来禁用平移以使其正常工作：

selection.call(zoom)
    .on("mousedown.zoom", null)

d3.js - 添加缩放和平移可防止拖动节点

1 个答案: