问题描述
我试图保存到数据库的缩放和缩放级别。我取得了进步,但有一些我解决的问题。
I am trying to save to database a zoom and scale level. I made progress, but there is something I have issues solving.
这是怎么回事。在我的力图初始渲染,我的缩放级别是确切的。所以换句话说,这是我做的:
This is how it goes. On my force diagram initial render, my zoom levels are exact. So in other words this is what I do:
svg.append("defs").selectAll("marker")
.data(["suit", "licensing", "resolved"])
.enter().append("marker")
.attr("id", function (d) {
return d;
})
.attr("viewBox", "0 -5 10 10")
.attr("refX", 25)
.attr("refY", 0)
.attr("markerWidth", 4)
.attr("markerHeight", 4)
.attr("orient", "auto")
.append("path")
.attr("d", "M 0,0 m -5,-5 L 5,0 L -5,5 Z")
.style("stroke", "#4679BD")
.style("opacity", "0.6")
.attr("transform", "translate(" + zoomWidth + "," + zoomHeight + ") scale(" +
scale + ")");
//This line restores the zoom
svg.attr("transform", "translate(" + graph.zoomTranslateX + "," +
graph.zoomTranslateY + ") scale(" + graph.scale + ")")
这是设置初始缩放和缩放的代码行级别,它的工作很好:
This is the line of code that sets the initial zoom and scale levels, and it works just fine:
svg.attr("transform", "translate(" + graph.zoomTranslateX + "," +
graph.zoomTranslateY + ") scale(" + graph.scale + ")")
$ b b
如果我检查SVG元素在我的html中加载该图表,我可以看到它正确设置:
As soon as thediagram is loaded if I inspect the SVG element in my html, I can see it is properly set:
<g transform="translate(-12632.3077320904,-830.9843396749) scale(24.25)"
当我使用鼠标滚轮放大或缩小时发生问题。
Problem happens when I use mouse wheel to zoom in or out. What happens my initial values are overwritten, and some (default?) other values are set.
这是我的缩放功能:
function zoomed() {
var zoomLevels = sessionStorage.getItem("graphdata");
var storedGraphJSON = JSON.parse(zoomLevels.replace(/\bNaN\b/g, 'null'));
//Calculation of zoom properties:
//d3.event.translate[0] = d3.event.translate[0] -
storedGraphJSON.zoomTranslateX;
//d3.event.translate[1] = d3.event.translate[1] -
storedGraphJSON.zoomTranslateY;
//d3.event.scale = d3.event.scale - storedGraphJSON.scale;
svg.attr("transform", "translate(" + d3.event.translate + ")scale(" +
d3.event.scale + ")");
graph.zoomTranslateX = storedGraphJSON.zoomTranslateX =
d3.event.translate[0];
graph.zoomTranslateY = storedGraphJSON.zoomTranslateY =
d3.event.translate[1];
graph.scale = storedGraphJSON.scale = d3.event.scale;
sessionStorage.setItem("graphdata", JSON.stringify(storedGraphJSON));
}
据我所知,d3.event.translate和d3.event .scale应该获取在svg元素上设置的初始值....但不是。
As far as I can tell, d3.event.translate and d3.event.scale should pick up initial value that is set on svg element.... but it does not.
任何洞察力都是值得赞赏的。
Any insight is appreciated.
p $ p> var zoom = d3.behavior.zoom()
.scaleExtent([ - 40,100])
.on(zoom,zoomed);
//确保缩放选择从DOM上设置的初始值!
zoom.scale(graph.scale);
zoom.translate([graph.zoomTranslateX,graph.zoomTranslateY]);
像charm:)
这篇关于3djs,力图。如何保留缩放级别的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!