我正在嘗試使用 d3.js 中的以下代碼重新創建地圖。這是一個互動式地圖。當我將滑鼠懸停在圓圈上時，它應該顯示一個工具提示。但問題是我的工具提示沒有隨滑鼠移動。它卡在畫布的底部。我試過改變風格。我不知道它有什么問題。有人可以幫我解決這個問題嗎？我正在使用 d3 版本 4。
<!DOCTYPE html>
<meta charset="utf-8">
<!-- Load d3.js and the geo projection plugin -->
<script src="https://d3js.org/d3.v4.js"></script>
<script src="https://d3js.org/d3-geo-projection.v2.min.js"></script>
<!-- Create an element where the map will take place -->
<div id="my_dataviz"></div>
<style>
.circle:hover{
stroke: black;
stroke-width: 4px;
}
</style>
<script>
// Size ?
var width = 460
var height = 400
// The svg
var svg = d3.select("#my_dataviz")
.append("svg")
.attr("width", width)
.attr("height", height)
// Map and projection
var projection = d3.geoMercator()
.center([4, 47]) // GPS of location to zoom on
.scale(1020) // This is like the zoom
.translate([ width/2, height/2 ])
// Create data for circles:
var markers = [
{long: 9.083, lat: 42.149, name: "Corsica"}, // corsica
{long: 7.26, lat: 43.71, name: "Nice"}, // nice
{long: 2.349, lat: 48.864, name: "Paris"}, // Paris
{long: -1.397, lat: 43.664, name: "Hossegor"}, // Hossegor
{long: 3.075, lat: 50.640, name: "Lille"}, // Lille
{long: -3.83, lat: 58, name: "Morlaix"}, // Morlaix
];
// Load external data and boot
d3.json("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/world.geojson", function(data){
// Filter data
data.features = data.features.filter( function(d){return d.properties.name=="France"} )
// Draw the map
svg.append("g")
.selectAll("path")
.data(data.features)
.enter()
.append("path")
.attr("fill", "#b8b8b8")
.attr("d", d3.geoPath()
.projection(projection)
)
.style("stroke", "black")
.style("opacity", .3)
// create a tooltip
var Tooltip = d3.select("#my_dataviz")
.append("div")
.attr("class", "tooltip")
.style("opacity", 1)
.style("background-color", "white")
.style("border", "solid")
.style("border-width", "2px")
.style("border-radius", "5px")
.style("padding", "5px")
// Three function that change the tooltip when user hover / move / leave a cell
var mouseover = function(d) {
Tooltip.style("opacity", 1)
}
var mousemove = function(d) {
Tooltip
.html(d.name "<br>" "long: " d.long "<br>" "lat: " d.lat)
.style("left", (d3.mouse(this)[0] 10) "px")
.style("top", (d3.mouse(this)[1]) "px")
}
var mouseleave = function(d) {
Tooltip.style("opacity", 0)
}
// Add circles:
svg
.selectAll("myCircles")
.data(markers)
.enter()
.append("circle")
.attr("cx", function(d){ return projection([d.long, d.lat])[0] })
.attr("cy", function(d){ return projection([d.long, d.lat])[1] })
.attr("r", 14)
.attr("class", "circle")
.style("fill", "69b3a2")
.attr("stroke", "#69b3a2")
.attr("stroke-width", 3)
.attr("fill-opacity", .4)
.on("mouseover", mouseover)
.on("mousemove", mousemove)
.on("mouseleave", mouseleave)
})
</script>
uj5u.com熱心網友回復：
您的工具提示的 x,y 坐標很好，您只是缺少position: absolute;它們的樣式。我選擇將它添加到<style>您在下面的片段中的元素中，但您也可以在 JS 中完成它.style()。
我還選擇添加position: relative;以#my_dataviz保持工具提示相對于該容器的絕對定位。
<!-- Load d3.js and the geo projection plugin -->
<script src="https://d3js.org/d3.v4.js"></script>
<script src="https://d3js.org/d3-geo-projection.v2.min.js"></script>
<!-- Create an element where the map will take place -->
<div id="my_dataviz"></div>
<style>
.circle:hover{
stroke: black;
stroke-width: 4px;
}
#my_dataviz {
position: relative;
}
.tooltip {
position: absolute;
}
</style>
<script>
// Size ?
var width = 460
var height = 400
// The svg
var svg = d3.select("#my_dataviz")
.append("svg")
.attr("width", width)
.attr("height", height)
// Map and projection
var projection = d3.geoMercator()
.center([4, 47]) // GPS of location to zoom on
.scale(1020) // This is like the zoom
.translate([ width/2, height/2 ])
// Create data for circles:
var markers = [
{long: 9.083, lat: 42.149, name: "Corsica"}, // corsica
{long: 7.26, lat: 43.71, name: "Nice"}, // nice
{long: 2.349, lat: 48.864, name: "Paris"}, // Paris
{long: -1.397, lat: 43.664, name: "Hossegor"}, // Hossegor
{long: 3.075, lat: 50.640, name: "Lille"}, // Lille
{long: -3.83, lat: 58, name: "Morlaix"}, // Morlaix
];
// Load external data and boot
d3.json("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/world.geojson", function(data){
// Filter data
data.features = data.features.filter( function(d){return d.properties.name=="France"} )
// Draw the map
svg.append("g")
.selectAll("path")
.data(data.features)
.enter()
.append("path")
.attr("fill", "#b8b8b8")
.attr("d", d3.geoPath()
.projection(projection)
)
.style("stroke", "black")
.style("opacity", .3)
// create a tooltip
var Tooltip = d3.select("#my_dataviz")
.append("div")
.attr("class", "tooltip")
.style("opacity", 1)
.style("background-color", "white")
.style("border", "solid")
.style("border-width", "2px")
.style("border-radius", "5px")
.style("padding", "5px")
// Three function that change the tooltip when user hover / move / leave a cell
var mouseover = function(d) {
Tooltip.style("opacity", 1)
}
var mousemove = function(d) {
Tooltip
.html(d.name "<br>" "long: " d.long "<br>" "lat: " d.lat)
.style("left", (d3.mouse(this)[0] 10) "px")
.style("top", (d3.mouse(this)[1]) "px")
}
var mouseleave = function(d) {
Tooltip.style("opacity", 0)
}
// Add circles:
svg
.selectAll("myCircles")
.data(markers)
.enter()
.append("circle")
.attr("cx", function(d){ return projection([d.long, d.lat])[0] })
.attr("cy", function(d){ return projection([d.long, d.lat])[1] })
.attr("r", 14)
.attr("class", "circle")
.style("fill", "69b3a2")
.attr("stroke", "#69b3a2")
.attr("stroke-width", 3)
.attr("fill-opacity", .4)
.on("mouseover", mouseover)
.on("mousemove", mousemove)
.on("mouseleave", mouseleave)
})
</script>display: none;這是另一個使用而不是更改隱藏工具提示的片段opacity。這修復了一個錯誤，其中一個圓圈（例如，科西嘉島）可能不再接收滑鼠事件，因為盡管工具提示不可見，但它仍位于其頂部。
<!-- Load d3.js and the geo projection plugin -->
<script src="https://d3js.org/d3.v4.js"></script>
<script src="https://d3js.org/d3-geo-projection.v2.min.js"></script>
<!-- Create an element where the map will take place -->
<div id="my_dataviz"></div>
<style>
.circle:hover{
stroke: black;
stroke-width: 4px;
}
#my_dataviz {
position: relative;
}
.tooltip {
position: absolute;
display: none;
}
</style>
<script>
// Size ?
var width = 460
var height = 400
// The svg
var svg = d3.select("#my_dataviz")
.append("svg")
.attr("width", width)
.attr("height", height)
// Map and projection
var projection = d3.geoMercator()
.center([4, 47]) // GPS of location to zoom on
.scale(1020) // This is like the zoom
.translate([ width/2, height/2 ])
// Create data for circles:
var markers = [
{long: 9.083, lat: 42.149, name: "Corsica"}, // corsica
{long: 7.26, lat: 43.71, name: "Nice"}, // nice
{long: 2.349, lat: 48.864, name: "Paris"}, // Paris
{long: -1.397, lat: 43.664, name: "Hossegor"}, // Hossegor
{long: 3.075, lat: 50.640, name: "Lille"}, // Lille
{long: -3.83, lat: 58, name: "Morlaix"}, // Morlaix
];
// Load external data and boot
d3.json("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/world.geojson", function(data){
// Filter data
data.features = data.features.filter( function(d){return d.properties.name=="France"} )
// Draw the map
svg.append("g")
.selectAll("path")
.data(data.features)
.enter()
.append("path")
.attr("fill", "#b8b8b8")
.attr("d", d3.geoPath()
.projection(projection)
)
.style("stroke", "black")
.style("opacity", .3)
// create a tooltip
var Tooltip = d3.select("#my_dataviz")
.append("div")
.attr("class", "tooltip")
.style("background-color", "white")
.style("border", "solid")
.style("border-width", "2px")
.style("border-radius", "5px")
.style("padding", "5px")
// Three function that change the tooltip when user hover / move / leave a cell
var mouseover = function(d) {
Tooltip.style("display", "block")
}
var mousemove = function(d) {
Tooltip
.html(d.name "<br>" "long: " d.long "<br>" "lat: " d.lat)
.style("left", (d3.mouse(this)[0] 10) "px")
.style("top", (d3.mouse(this)[1]) "px")
}
var mouseleave = function(d) {
Tooltip.style("display", "none")
}
// Add circles:
svg
.selectAll("myCircles")
.data(markers)
.enter()
.append("circle")
.attr("cx", function(d){ return projection([d.long, d.lat])[0] })
.attr("cy", function(d){ return projection([d.long, d.lat])[1] })
.attr("r", 14)
.attr("class", "circle")
.style("fill", "69b3a2")
.attr("stroke", "#69b3a2")
.attr("stroke-width", 3)
.attr("fill-opacity", .4)
.on("mouseover", mouseover)
.on("mousemove", mousemove)
.on("mouseleave", mouseleave)
})
</script>轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/522513.html
上一篇：從ASP.NETWebAPI中的模型系結器回傳的更改400錯誤回應
下一篇：帶有連接節點的鏈接的聚集氣泡