我正在尝试在d3.js的地图上添加工具提示,当您将鼠标悬停在区域上时,它会显示区域名称。输入是一个topojson文件,我已成功生成带有区域边界和突出显示当前选定区域的地图。
对于工具提示,我尝试类似于this的操作,但根本没有任何反应。我使用的代码如下所示。工具提示代码在末尾。
对于工具提示,我尝试类似于this的操作,但根本没有任何反应。我使用的代码如下所示。工具提示代码在末尾。
var width = 960,
height = 600;
var projection = d3.geo.albers()
.center([87, 28])
.rotate([-85, 0])
.parallels([27, 32]);
var path = d3.geo.path()
.projection(projection);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
svg.append("rect")
.attr("width", width)
.attr("height", height);
var g = svg.append("g");
var div = d3.select("body").append("div")
.attr("class", "tooltip")
.style("opacity", 1e-6);
d3.json("data/nepal3.json", function(error, npl) {
var districts = topojson.feature(npl, npl.objects.nepal_districts);
projection
.scale(1)
.translate([0, 0]);
var b = path.bounds(districts),
s = .95 / Math.max((b[1][0] - b[0][0]) / width, (b[1][1] - b[0][1]) / height),
t = [(width - s * (b[1][0] + b[0][0])) / 2, (height - s * (b[1][1] + b[0][1])) / 2];
projection
.scale(s)
.translate(t);
g.selectAll(".nepal_districts")
.data(districts.features)
.enter().append("path")
.attr("class", function(d) { return "nepal_districts " + d.id; })
.attr("d", path)
.on("mouseover", function(d,i) {
d3.select(this.parentNode.appendChild(this)).transition().duration(300)
.style({'stroke-width':2,'stroke':'#333333','stroke-linejoin':'round','cursor':'pointer','fill':'#b9270b'});
})
.on("mouseout", function(d,i) {
d3.select(this.parentNode.appendChild(this)).transition().duration(100)
.style({'stroke-width':2,'stroke':'#FFFFFF','stroke-linejoin':'round','fill':'#3d71b6'});
});
g.append("path")
.datum(topojson.mesh(npl, npl.objects.nepal_districts, function(a, b) { return a !== b;}))
.attr("d", path)
.attr("class", "district-boundary");
/* Tooltip */
g.selectAll(".nepal_districts")
.data(districts.features)
.enter().append("text")
.append("svg:rect")
.attr("width", 140)
.attr("height", 140)
.text(function(d) { return d.properties.name; })
.on("mouseover", mouseover)
.on("mousemove", mousemove)
.on("mouseout", mouseout);
function mouseover() {
div.transition()
.duration(300)
.style("opacity", 1);
}
function mousemove() {
div
.text(d3.event.pageX + ", " + d3.event.pageY)
.style("left", (d3.event.pageX - 34) + "px")
.style("top", (d3.event.pageY - 12) + "px");
}
function mouseout() {
div.transition()
.duration(100)
.style("opacity", 1e-6);
}
});
CSS是
div.tooltip {
position: absolute;
text-align: center;
width: 60px;
height: 28px;
padding: 2px;
font: 12px sans-serif;
background: #4c4c4c;
border: 0px;
border-radius: 8px;
pointer-events: none;
}
我为“Tooltip”添加的代码根本没有起作用。我做错了什么?
topojson文件具有此格式。我想让“name”属性显示在提示中。
{
"type": "Topology",
"objects": {
"nepal_districts": {
"type": "GeometryCollection",
"geometries": [
{
"type": "Polygon",
"id": 0,
"properties": {
"name": "HUMLA"
},
"arcs": [
[
0,
1,
2,
3
]
]
},