d3拖动和缩放不起作用

Question

我目前尝试使用d3树来构建Mindmap。 因此，我希望能够使用d3.behaviour进行拖动和缩放。

我的代码的主要结构基于Mike Bostock编写的简单可折叠树示例。

在加载数据之前，我全局地初始化了这两种技术：

var zoom = d3.behavior.zoom()
    .scaleExtent([1, 10])
    .on("zoom", zoomed);

var drag = d3.behavior.drag()
    .origin(function(d) { return d; })
    .on("dragstart", dragstarted)
    .on("drag", dragged)
    .on("dragend", dragended);

函数基本上是此示例的复制粘贴： 示例

我尝试在svg对象初始化之后，在加载功能之前，在更新功能之外执行缩放和拖动调用，而这本来是行不通的。

我也尝试在更新功能中应用这些功能，例如svg.call(zoom) ，它也无法正常工作。 没有错误，实际上没有任何反应。

使用这些技术时需要考虑一些事项吗？

编辑：

我使用的功能与上面的示例相同：

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

function dragstarted(d) {
  d3.event.sourceEvent.stopPropagation();
  d3.select(this).classed("dragging", true);
}

function dragged(d) {
  d3.select(this).attr("cx", d.x = d3.event.x).attr("cy", d.y = d3.event.y);
}

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

Answer 1

在缩放功能上，请记住更新转换属性：

function zoomed() {
  container.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
}

拖动功能可更新元素的位置：

function dragged(d) {
  d3.select(this).attr("cx", d.x = d3.event.x).attr("cy", d.y = d3.event.y);
}