使用d3.js圍繞其中心的奇怪的矩形旋轉

Question

我打算使用d3.js圍繞其中心旋轉矩形。 我的代碼是

var svg = d3.select("body") 
 
    .append("svg").attr("width", 200).attr("height", 200).append("rect") 
 
    .attr("x", 50) 
 
    .attr("y", 50) 
 
    .attr("fill", "black") 
 
    .attr("width", 100) 
 
    .attr("height", 100) 
 
    .transition() 
 
    .ease("linear") 
 
    .duration(1000) 
 
    .attr("transform", "rotate(180,100,100)");

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

它旋轉，涉及到其原始x，矩形的y座標，但 不旋轉過程中圍繞其中心旋轉。

正確的代碼，我在網絡上找到的是

var svg = d3.select("body").append("svg").attr("width", 200).attr("height", 200); 
 

 
var rect = svg.append("rect") 
 
    .attr("x", 50) 
 
    .attr("y", 50) 
 
    .attr("width", 100) 
 
    .attr("height", 100); 
 

 
rect.transition().duration(5000) 
 
    .attrTween("transform", rotTween); 
 

 
function rotTween() { 
 
    var i = d3.interpolate(0, 360); 
 
    return function(t) { 
 
     return "rotate(" + i(t) + ",100,100)"; 
 
    }; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

這個矩形圍繞其中心旋轉正確。但是我看不出兩個代碼之間有什麼區別。有什麼不同？

Answer 1

正如在註釋中，你可以清楚地看到差異，當您檢查屬性...

var log = d3.ui.log("#log").style("vertical-align", "top"), 
 
\t logTween = d3.ui.log("#logTween").style("vertical-align", "top"), 
 
    stoppedTween = false, 
 
    stopped = false; 
 
log.writeLine("translate\t\trotate") 
 
logTween.writeLine("translate\t\trotate") 
 

 
var rect = d3.select("body") 
 
    .insert("svg", "#log").attr("width", 200).attr("height", 100).append("rect") 
 
    .attr("x", 20) 
 
    .attr("y", 20) 
 
    .attr("fill", "black") 
 
    .attr("width", 40) 
 
    .attr("height", 40); 
 

 
rect.transition() 
 
    .ease("linear") 
 
    .duration(1000) 
 
    .attr("transform", "rotate(180,100,100)") 
 
    .each("start", function() { 
 
    d3.timer(function() { 
 
     var t = d3.transform(rect.attr("transform")); 
 
     log.writeLine([t.translate.map(f).join(","), f(t.rotate)].join("\t")) 
 
     return stopped; 
 
    }) 
 
}) 
 
    .each("end", function() { 
 
    stopped = true 
 
}); 
 
var svg = d3.select("body").insert("svg", "#logTween").attr("width", 100).attr("height", 100); 
 

 
var rectTween = svg.append("rect") 
 
    .attr("x", 20) 
 
    .attr("y", 20) 
 
    .attr("width", 40) 
 
    .attr("height", 40); 
 

 

 
rectTween.transition().duration(1000) 
 
    .ease("linear") 
 
    .attrTween("transform", rotTween) 
 
    .each("start", function() { 
 
    d3.timer(function() { 
 
     var t = d3.transform(rectTween.attr("transform")); 
 
     logTween.writeLine([t.translate.map(f).join(","), f(t.rotate)].join("\t")) 
 
     return stoppedTween; 
 
    }) 
 
}) 
 
    .each("end", function() { 
 
    stoppedTween = true 
 
}); 
 

 

 
function rotTween() { 
 
    var i = d3.interpolate(0, 360); 
 
    return function(t) { 
 
     return "rotate(" + i(t) + ",40,40)"; 
 
    }; 
 
} 
 

 
function f(x) { 
 
    return d3.format(" >6.1f")(x) 
 
}

div {white-space: pre;} 
 
svg {overflow: visible;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="UTF-8"></script> 
 
<script src="https://rawgit.com/cool-Blue/d3-lib/master/Output/log/log.js"></script> 
 
<div id="log"></div> 
 
<div id="logTween"></div>

的