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地圖工具提示對齊

回答

相關問題