Question

我构建了一个主要基于these really helpful examples的D3力图。

我想添加平移和缩放功能，我尝试使用另一个示例（看起来我只能包含两个链接，但谷歌“d3强制缩放eyaler”才能找到它。）

不幸的是，当我缩小比初始SVG大的图表时，我得到这样的结果：

以下是相关代码：

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
    .call(d3.behavior.zoom().scaleExtent([0.5,2]).on("zoom", redraw));

function redraw() {
  svg.attr("transform",
      "translate(" + d3.event.translate + ")"
      + " scale(" + d3.event.scale + ")");
}

如何更改平移和缩放行为以使其滚动并且可以查看图形的其余部分，而不是仅仅允许我移动最初可见的方块？

Answer 1

好的，看起来我已经解决了......你需要在<g>而不是在SVG本身上执行转换。所以：

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
    .call(d3.behavior.zoom().scaleExtent([0.5,2]).on("zoom", redraw));

var g = svg.append("g"); // add <g>

function redraw() {
  g.attr("transform",    // perform transform on g, not svg
      "translate(" + d3.event.translate + ")"
      + " scale(" + d3.event.scale + ")");
}

将此放在这里以防其他人犯同样的错误！

D3力图不会按预期平移或缩放

1 个答案: