javascript 使用 d3 SVG Scale 无需翻译
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11245655/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using d3 SVG Scale without translate
提问by user1167650
I'm trying to use the scale() transform in SVG and d3. I understand it works by increasing the coordinate scale, but it seems to also be translating my object. When I have a rectangle located at (100,100) and I do a scale(2), the rectangle doubles in size and moves to (0,0). How do I get it to stop moving from (100,100) to (0,0) while scaling. The following is my code:
我正在尝试在 SVG 和 d3 中使用 scale() 转换。我知道它通过增加坐标比例来工作，但它似乎也在平移我的对象。当我有一个位于 (100,100) 的矩形并执行 scale(2) 时，矩形的大小加倍并移动到 (0,0)。我如何让它在缩放时停止从 (100,100) 移动到 (0,0)。以下是我的代码：
var mysvg = d3.select("#viz")
.append("svg")
.attr("width", 500)
.attr("height", 500)
.attr("class","mylist");
var node = mysvg.selectAll("g.node")
.data(mydata)
.enter().append("g")
.attr("class","node")
.attr("transform", function(d) { return "translate(" + d.xpos + "," + d.ypos + ")"; });
node.append("rect")
.attr("width",tileWidth)
.attr("height",tileWidth)
.attr("fill","orange")
.attr("rx",10)
.attr("ry",10);
node.append("text")
.attr("transform",function(d) { return "translate(" + tileWidth/2 + "," + tileWidth/2 +")" })
.attr("text-anchor", "middle")
.attr("dy", ".3em")
.attr("font-family","serif")
.text(function(d) { return d.symbol; });
node.on("mouseover",function(){ d3.select(this).transition().attr("transform","scale(1.2)") });
node.on("mouseout",function(){ d3.select(this).transition().attr("transform","scale(1)") });
回答by methodofaction
Your mouseoverand mouseoutevents are overriding the original translate(" + d.xpos + "," + d.ypos + ").
您的mouseover和mouseout事件正在覆盖原始translate(" + d.xpos + "," + d.ypos + ").
I think the easiest way to work around this would be adding a parent gand translating that, such as...
我认为解决此问题的最简单方法是添加父项g并进行翻译，例如...
var mysvg = d3.select("#viz")
.append("svg")
.attr("width", 500)
.attr("height", 500)
.attr("class","mylist");
var parent = mysvg.selectAll("g.parent")
.data(mydata)
.enter().append("g")
.attr("class","parent")
.attr("transform", function(d) { return "translate(" + d.xpos + "," + d.ypos + ")"; });
var node = mysvg.selectAll("g.parent")
.enter().append("g")
.attr("class","node")
});
node.append("rect")
.attr("width",tileWidth)
.attr("height",tileWidth)
.attr("fill","orange")
.attr("rx",10)
.attr("ry",10);
node.append("text")
.attr("transform",function(d) { return "translate(" + tileWidth/2 + "," + tileWidth/2 +")" })
.attr("text-anchor", "middle")
.attr("dy", ".3em")
.attr("font-family","serif")
.text(function(d) { return d.symbol; });
node.on("mouseover",function(){ d3.select(this).transition().attr("transform","scale(1.2)") });
node.on("mouseout",function(){ d3.select(this).transition().attr("transform","scale(1)") });
回答by Michael
A general solution to scale without a translation can be found here: Scaling Around a Center Point
可以在此处找到无需平移即可缩放的通用解决方案： 围绕中心点缩放
Idea:
主意：
translate(-centerX*(factor-1), -centerY*(factor-1))
scale(factor)
