用d3旋转并缩放svg javascript

Question

我想用D3.js旋转并缩放其中心的图形。当我缩放图形时，我想用当前宽高比缩放图形，反之亦然，我想旋转图形时将其缩放到鼠标指向的当前点。对于缩放，我使用鼠标滚轮并进行旋转，我使用鼠标按钮。

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 g = svg.append("g"); 

g.append("line") 
    .attr("x1", "20") 
    .attr("y1", "20") 
    .attr("x2", "60") 
    .attr("y2", "60") 
    .attr("stroke", "black") 
    .attr("stroke-width", "10"); 

    svg.call(d3.drag() 
     .on("drag",onDrag) 
) 
    // ########################## 
    var boxCenter = [100, 100]; 
    // ############################# 
    function onDrag(){ 

    var x = d3.event.sourceEvent.pageX, 
    y = d3.event.sourceEvent.pageY; 

    var angle = Math.atan2(x - boxCenter[0], 
     - (y - boxCenter[1]))*(180/Math.PI); 

    g.attr("transform", "rotate("+angle+")"); 
    } 

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

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


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

这是我的例子： https://jsfiddle.net/6Lyjz35L/

Answer 1

周边的中心旋转是正确的你需要添加一个“变换原点”属性“G”初始变焦。

g.attr("transform-origin", "50% 50%"); 

其他问题源于在两个不同的位置分配'transform'属性。元素（'g'）一次只能应用一个'transform'属性，因此每次旋转或缩放时都会覆盖其中一个。为了解决这个问题，你可以创建一个辅助方法，它将在一个字符串中追加你想要的两个变换。

var currentAngle = 0; 
var currentZoom = ''; 

function getTransform(p_angle, p_zoom) { 
    return `${p_zoom} rotate(${p_angle})`; 
    // return p_zoom + " rotate(" + p_angle + ")"; 
} 

// In the rotate: 
currentAngle = angle; 
g.attr("transform", getTransform(currentAngle, currentZoom)); 

// In the zoom: 
currentZoom = d3.event.transform; 
g.attr("transform", getTransform(currentAngle, currentZoom)); 

有是由变焦推出一个更的问题，那就是你必须在不同的缩放级别来计算新变换原点。 我说的问题是由缩放引入的，实际上是以不正确的顺序应用操作的结果。最初我应用了旋转和THEN然后翻译。它实际上需要被颠倒，翻译和THEN轮换。这将保持正确的转换原点。

这里的这些变化小提琴：https://jsfiddle.net/scmxcszz/1/