添加号码变换属性

的jsfiddlehttps://jsfiddle.net/xgt8Loxb/4 添加号码变换属性

我试图变焦，但变焦启动时，它的坐标转换成了0,0，我无法找到一个方法来增加所抵消。

var svg = d3.select("svg") 
     .call(d3.zoom().on("zoom", function() { 
     svg.attr("transform", "translate (" + d3.event.transform.x + "," + d3.event.transform.y + ") scale(" + d3.event.transform.k + ")") 
     })) 
     .select("g")

我试图添加到做("transform", "translate(" + d3.event.transform.x + 640 "," + d3.event.transform.y + 360 + ")") 但它只是让拼接，尽管parseInt函数（）或其他anhything，诚实。我尝试了一切，所以我猜想在d3中向动态属性添加数字是不可能的。

来源

2017-08-25 one2gov

首先，不要将变换应用到缩放函数上的整个SVG。它适用于只是到组，而不是：

.on("zoom", function() { 
    g.attr("transform", "translate (" + d3.event.transform.x + 
     "," + d3.event.transform.y + ") scale(" + d3.event.transform.k + ")") 
});

二，使用zoom.transform保留原始的 “翻译”：

var svg = d3.select("svg") 
    .call(zoom) 
    .call(zoom.transform, d3.zoomIdentity.translate((width/2), (height/2)))

这里是更新的小提琴：https://jsfiddle.net/kx7vdxzq/

PS：关于标题你的问题，因为你串联字符串和数字，你应该首先设置数字。这可以用简单的括号完成：

("transform", "translate(" + (d3.event.transform.x + 640) + 
    "," + (d3.event.transform.y + 360) + ")")

来源

2017-08-26 00:04:12

添加号码变换属性

回答

相关问题