Javascript地图工具提示对齐

-2

我最近有一个开发者退出了我的项目，完成率达到95％，并一直试图自己完成这个项目。我目前正在在地图上的提示放置此页上找到：Javascript地图工具提示对齐

https://www.shiftins.com/homeowners-insurance-california/

这里你可以看到源：

https://www.shiftins.com/county/index.html

有2个问题，我需要帮助解决。

条形图的工具提示应位于鼠标指针处;然而，它位于图表的右侧
地图部分的工具提示在按比例缩小时似乎在县的右下半部分消失。

我已经花了好几个小时与试错法尝试多种解决方案，但我似乎无法推测出来（尤其是因为我不是一个开发商）。

来源

2016-05-27 shictins

对于要显示的地图工具提示，而不是填充左栏中的char，给左属性;. 这是因为，现在条形图在地图上重叠，如果保留边界，则可以清楚地看到重叠。

<div id="linechart" class="col-sm-3" style="width: 60%;padding-left:120px;">

改变这一行

 <div id="linechart" class="col-sm-3" style="width: 60%;left:125px;">

对于栏工具提示出现，现在d3.event.pageX给人mouse.To的x坐标值，得到准确的x值，你需要减去offsetLeft值

var x = d3.event.pageX + 5-document.getElementById("linechart").offsetLeft;

来源

2016-05-27 17:45:22 user3696882

谢谢。你还可以帮助我将刀尖位置从左侧移动到左下侧？ OH，并发送给我您的电子邮件地址。 – shictins

你能帮我移动工具提示位置吗？我试着改变''d3.select（“＃tooltipp”） .style（“left”，x +“px”） .style（“top”，y +“px”） 'to'd3.select（“＃tooltipp”） .style（“left”，x +“px”） .style（“bottom”，y +“px”）'但它没有工作 – shictins

好的，我会帮助你。将看看它 – user3696882

您需要在mouseover/hover事件上定位工具提示的左侧和顶部，即x和y轴。事情是这样的：

这种风格添加到工具提示DIV： "left", (d3.event.pageX) + "px").style("top", (d3.event.pageY - 28) + "px"

这里是一个工作example

来源

2016-05-27 18:56:11 SiddP

Javascript地图工具提示对齐

回答

相关问题