d3.js在程序缩放后使用鼠标时的平移和缩放跳转

我试图在加载时将中心的d3图形居中。所以我跑d3.js在程序缩放后使用鼠标时的平移和缩放跳转

var g = svg.append("g"); 

//... then later 

g.call(zoom.transform, center);

它实际上并不居中，它只是现在缩放。但规模起作用。问题是，当我滚动放大或缩小时，它从1而不是0.5开始。所以它跳。

这是我的jsbin。

来源

2016-07-26 Tyler Graf

您正在将事件应用于不同的对象（g），然后在其上设置缩放（svg）。由于缩放事件是针对其应用的元素引用的，所以d3现在不包含有关您的初始居中。从docs：

变焦行为存储到该缩放行为被应用于元素的变焦状态，而不是在缩放行为本身。这是，因为缩放行为可以同时应用于许多元素，并且每个元素可以独立缩放。缩放状态可以改变用户交互或通过 zoom.transform进行编程。

将您的来电改为svg.call(zoom.transform, center);可以解决您的问题。

完整代码：

var svg = d3.select("svg"), 
 
    width = +svg.attr("width"), 
 
    height = +svg.attr("height"), 
 
    transform = d3.zoomIdentity; 
 

 
var points = d3.range(2000).map(phyllotaxis(10)); 
 

 
var zoom = d3.zoom() 
 
    .scaleExtent([1/2, 8]) 
 
    .on("zoom", zoomed); 
 

 
var g = svg.append("g"); 
 

 
g.selectAll("circle") 
 
    .data(points) 
 
    .enter().append("circle") 
 
    .attr("cx", function(d) { return d.x; }) 
 
    .attr("cy", function(d) { return d.y; }) 
 
    .attr("r", 2.5) 
 
    .call(d3.drag() 
 
     .on("drag", dragged)); 
 

 
svg.call(zoom); 
 

 
function zoomed() { 
 
    g.attr("transform", d3.event.transform); 
 
} 
 

 
function center() { 
 
    return d3.zoomIdentity 
 
     .scale(0.5); 
 
} 
 

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

 
function phyllotaxis(radius) { 
 
    var theta = Math.PI * (3 - Math.sqrt(5)); 
 
    return function(i) { 
 
    var r = radius * Math.sqrt(i), a = theta * i; 
 
    return { 
 
     x: width/2 + r * Math.cos(a), 
 
     y: height/2 + r * Math.sin(a) 
 
    }; 
 
    }; 
 
} 
 

 
svg.call(zoom.transform, center);

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
</head> 
 
<body> 
 
<svg width="960" height="500"></svg> 
 
<script src="https://d3js.org/d3.v4.min.js"></script> 
 
</body> 
 
</html>

来源

2016-07-27 00:21:18 Mark

谢谢你，谢谢你！ –

d3.js在程序缩放后使用鼠标时的平移和缩放跳转

回答

相关问题