工具提示缩放（缩放）以及d3地理地图
[英]Tooltip scaled(zoom) along with d3 geo map
问题描述
I am working on a world map with zoom and pan. 
我正在使用缩放和平移世界地图。 I draw circles on certain cities and the radius of the circle is determined by the data. 我在某些城市上绘制圆，圆的半径由数据确定。 When mouse over these circle then a tooltip will show up displaying the data. 将鼠标悬停在这些圆圈上时，将显示工具提示，以显示数据。
The structure of the code is // Zoom behavior is called on this selection - lets call this parentGroup 代码的结构是//在此选择上调用缩放行为-让我们将此父组称为
// To capture all mouse and touch events // Call this childGroup // Tooltip group hidden - will show/hide on mouseover // Call this toolTipGroup //捕获所有鼠标和触摸事件//调用此childGroup //隐藏工具提示组-鼠标悬停时显示/隐藏//调用此工具
The problem here is 这里的问题是
- If the toolTipGgroup is attached to parentGroup and lives as a sibling to the childGroup then when the map is zoomed the tip position is messed up. 如果将toolTipGgroup附加到parentGroup并作为childGroup的同级对象，则在缩放地图时，提示位置会混乱。 I tried getting the (x,y) from the projection and applied a translate(x,y) on the tooltip. 我尝试从投影中获取（x，y）并在工具提示上应用了一个transform（x，y）。 The tooltipGroup is translated but its irrelavant since zoom applied. tooltipGroup已转换，但是自从应用缩放后就没有意义。
- If the toolTipGroup is attached to the childGroup, when the map is zoomed the toolTipGroup position is intact but its zoomed along with the childGroup. 如果将toolTipGroup附加到childGroup，则在缩放地图时，toolTipGroup的位置会保持不变，但会与childGroup一起缩放。 How to stop the tool tip from scaling along with the map (retain its original size)? 如何阻止工具提示随地图缩放（保留其原始大小）？
Note: I control the size of the circles by redrawing each of the circles on zoom behavior's callback with the new radius = oldRadius/currentScale 注意：我通过使用新的radius = oldRadius/currentScale重绘缩放行为的回调上的每个圆来控制圆的大小
3 个解决方案
解决方案1
1 2018-01-18 19:13:59
I had this exact same issue and struggled for hours to find a solution. 我遇到了完全相同的问题，并努力寻找解决方案数小时。
Once I found this blog post by Peter Kerpedjiev in which he explained the transform equation in simple terms, I was able to easily apply that math to the tooltip transform. 一旦我找到了Peter Kerpedjiev的博客文章 ，其中他用简单的术语解释了转换方程，我便可以轻松地将该数学应用于工具提示转换。
The tooltip now follows the map around correctly after panning and zooming. 现在，在平移和缩放后，工具提示可以正确跟随地图。
解决方案2
0 2016-01-30 16:28:55
I don't understand your statement The negation of scale works on an image but in my case it doesnt work on a toolTipGroup (includes text, rect image and path) . 我不明白您的说法The negation of scale works on an image but in my case it doesnt work on a toolTipGroup (includes text, rect image and path) 。 This should work just fine, wrap it all in a g and inverse scale that. 这应该可以正常工作，将其全部包装成g并按反比例缩放。 The tricky part is recalculating the position of the tooltip with respect to the zoom. 棘手的部分是重新计算工具提示相对于缩放的位置。 Here's a quick example which places a tooltip on my home city of Baltimore, MD: 这是一个简单的示例，在我的家乡马里兰州巴尔的摩市上放置了一个工具提示：
<!DOCTYPE html> <meta charset="utf-8"> <style> .states { fill: none; stroke: #fff; stroke-linejoin: round; } </style> <body> <script src="//d3js.org/d3.v3.min.js"></script> <script src="//d3js.org/topojson.v1.min.js"></script> <script> var width = 960, height = 500; var fill = d3.scale.log() .domain([10, 500]) .range(["brown", "steelblue"]); var path = d3.geo.path(); var svg = d3.select("body").append("svg") .attr("width", width) .attr("height", height); var zoom = d3.behavior.zoom() .scaleExtent([1, 15]) .on("zoom", zoomed); svg.append("rect") .attr("class", "overlay") .attr("width", width) .attr("height", height); var g = svg.append("g"); var tooltip, tipPosition = [722, 160], tipSize = [85,50]; d3.json("https://rawgit.com/mbostock/topojson/master/examples/us-10m.json", function(error, us) { if (error) throw error; g.append("g") .attr("class", "counties") .selectAll("path") .data(topojson.feature(us, us.objects.counties).features) .enter().append("path") .attr("d", path) .style("fill", function(d) { return fill(path.area(d)); }); g.append("path") .datum(topojson.mesh(us, us.objects.states, function(a, b) { return a.id !== b.id; })) .attr("class", "states") .attr("d", path); tooltip = g.append("g") .attr("transform","translate(" + tipPosition + ")") .attr("class","tooltip"); tooltip .append("rect") .style("fill", "steelblue") .attr("width", tipSize[0]) .attr("height", tipSize[1] - 10) .attr("rx", "10") tooltip .append("path") .attr("d", function(){ var rv = ""; rv += "M"; rv += tipSize[0]/2 - 5; rv += "," rv += tipSize[1] - 10; rv += "L"; rv += tipSize[0]/2 + 5; rv += "," rv += tipSize[1] - 10; rv += "L"; rv += tipSize[0]/2; rv += "," rv += tipSize[1]; rv += "Z"; return rv; }) .style("fill", "steelblue"); tooltip .append("text") .text("Baltimore") .attr("transform","translate(" + (tipSize[0]/2) + "," + (tipSize[1]/2) + ")") .attr("text-anchor", "middle") .style("fill","black") .style("font-family","arial"); svg .call(zoom) .call(zoom.event); }); function zoomed() { // apply zoom g.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")"); // calculate position with respect to zoom var trans = [tipPosition[0] + (tipSize[0]/2 * (1-1/d3.event.scale)), tipPosition[1] + (tipSize[1] * (1-1/d3.event.scale))]; // inverse scale zoom tooltip.attr("transform", "translate(" + trans + ")scale(" + 1/d3.event.scale +")") } </script>
解决方案3
0 已采纳 2016-03-23 22:08:13
Moving the Tooltip group out of the path group solved the problem for me. 将工具提示组移出路径组对我来说解决了这个问题。 But I had to calculate the get the location of the mouse pointer to calculate the tooltip location which was previously auto-calculated based on the circle center. 但是我必须计算鼠标指针的位置来计算工具提示位置，该位置以前是根据圆心自动计算出来的。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.