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

Question

我已经基于these really helpful examples构建了D3力图。

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

不幸的是，当我在比最初的SVG较大的图形缩小，我得到的是这样的：

Result of dragging and dropping

下面是相关代码：

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 + ")"); 
 
}

如何更改平移和缩放行为以便滚动并使其显示po是否可以看到图表的其余部分，而不是只让我移动最初可见的平方？

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 + ")"); 
 
}

只是把这个位置的情况下，任何人都犯同样的错误！