D3将悬停功能添加到平面图层
问题描述:
我想学习使用D3平面图,但我无法理解如何向其添加悬停功能。理想情况下,我希望能够将鼠标悬停在图层上以显示工具提示 - 例如此处与多边形叠加:https://codepen.io/kvyb/pen/QpwGaY?editors=0010D3将悬停功能添加到平面图层
我有工具提示,但我无法理解必须将其添加到代码中的位置。 on(“mouseover”)...工作。
这是代码:
var jsonData = {
"heatmap": {
"binSize": 3,
"units": "\u00B0C",
"map": [
{"value": 19.9, "points": [{"x":2.513888888888882,"y":8.0},
{"x":6.069444444444433,"y":8.0},
{"x":6.069444444444434,"y":5.277535934291582},
{"x":8.20833333333332,"y":2.208151950718685},
{"x":13.958333333333323,"y":2.208151950718685},
{"x":16.277777777777825,"y":5.277535934291582},
{"x":16.277777777777803,"y":10.08151950718685},
{"x":17.20833333333337,"y":10.012135523613962},
{"x":17.27777777777782,"y":18.1387679671458},
{"x":2.513888888888882,"y":18.0}]}]
},
"overlays": {
"polygons": [
{"id": "p1", "name": "kitchen", "points": [{"x":2.513888888888882,"y":8.0},
{"x":6.069444444444433,"y":8.0},
{"x":6.069444444444434,"y":5.277535934291582},
{"x":8.20833333333332,"y":2.208151950718685},
{"x":13.958333333333323,"y":2.208151950718685},
{"x":16.277777777777825,"y":5.277535934291582},
{"x":16.277777777777803,"y":10.08151950718685},
{"x":17.20833333333337,"y":10.012135523613962},
{"x":17.27777777777782,"y":18.1387679671458},
{"x":2.513888888888882,"y":18.0}]}
]
},
};
var xscale = d3.scale.linear()
.domain([0,50.0])
.range([0,720]),
yscale = d3.scale.linear()
.domain([0,33.79])
.range([0,487]),
map = d3.floorplan().xScale(xscale).yScale(yscale),
imagelayer = d3.floorplan.imagelayer(),
heatmap = d3.floorplan.heatmap(),
vectorfield = d3.floorplan.vectorfield(),
pathplot = d3.floorplan.pathplot(),
overlays = d3.floorplan.overlays().editMode(false),
mapdata = {};
mapdata[imagelayer.id()] = [{
url: 'http://dciarletta.github.io/d3-floorplan/Sample_Floorplan.jpg',
x: 0,
y: 0,
height: 33.79,
width: 50.0
}];
map.addLayer(imagelayer)
.addLayer(heatmap)
.addLayer(vectorfield)
.addLayer(pathplot)
.addLayer(overlays);
var loadData = function(data) {
mapdata[heatmap.id()] = data.heatmap;
mapdata[overlays.id()] = data.overlays;
mapdata[vectorfield.id()] = data.vectorfield;
mapdata[pathplot.id()] = data.pathplot;
d3.select("#demo").append("svg")
.attr("height", 487).attr("width",720)
.datum(mapdata).call(map);
};
loadData(jsonData);
我的规划与布局规划多边形要使用的工具提示:
CSS
div.tooltip {
position: absolute;
text-align: center;
width: 120px;
height: 60px;
padding: 2px;
font: 12px sans-serif;
background: white;
border: 1px;
border-radius: 8px; box-shadow: 5px 5px 5px #888888;
pointer-events: none;
}
JS
var div = d3.select("body").append("div")
.attr("class", "tooltip")
.style("opacity", 0);
+
...
.on("mouseover", function(d) {
div.transition()
.duration(0)
.style("opacity", .9);
div .html("Price: <br>" + d.data.price + "<br/>Volume: " + d.data.volume)
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - 28) + "px");
})
.on("mouseout", function(d) {
div.transition()
.duration(0)
.style("opacity", 0);
})
我是D3的新手,所以我很苦恼。即使是在哪里寻找解决方案的提示也非常受欢迎。
答
看看下面
。对(“鼠标悬停”)...去你d3.select(...)
块
我也注释掉d.data.price
,因为在你的数据没有价格的关键。
var jsonData = {
"heatmap": {
"binSize": 3,
"units": "\u00B0C",
"map": [
{"value": 19.9, "points": [{"x":2.513888888888882,"y":8.0},
{"x":6.069444444444433,"y":8.0},
{"x":6.069444444444434,"y":5.277535934291582}, {"x":8.20833333333332,"y":2.208151950718685}, {"x":13.958333333333323,"y":2.208151950718685},
{"x":16.277777777777825,"y":5.277535934291582},
{"x":16.277777777777803,"y":10.08151950718685},
{"x":17.20833333333337,"y":10.012135523613962},
{"x":17.27777777777782,"y":18.1387679671458},
{"x":2.513888888888882,"y":18.0}]}]
},
"overlays": {
"polygons": [
{"id": "p1", "name": "kitchen", "points": [{"x":2.513888888888882,"y":8.0},
{"x":6.069444444444433,"y":8.0},
{"x":6.069444444444434,"y":5.277535934291582},
{"x":8.20833333333332,"y":2.208151950718685},
{"x":13.958333333333323,"y":2.208151950718685},
{"x":16.277777777777825,"y":5.277535934291582},
{"x":16.277777777777803,"y":10.08151950718685},
{"x":17.20833333333337,"y":10.012135523613962},
{"x":17.27777777777782,"y":18.1387679671458},
{"x":2.513888888888882,"y":18.0}]}
]
},
};
var xscale = d3.scale.linear()
.domain([0,50.0])
.range([0,720]),
yscale = d3.scale.linear()
.domain([0,33.79])
.range([0,487]),
map = d3.floorplan().xScale(xscale).yScale(yscale),
imagelayer = d3.floorplan.imagelayer(),
heatmap = d3.floorplan.heatmap(),
vectorfield = d3.floorplan.vectorfield(),
pathplot = d3.floorplan.pathplot(),
overlays = d3.floorplan.overlays().editMode(false),
mapdata = {};
mapdata[imagelayer.id()] = [{
url: 'http://dciarletta.github.io/d3-floorplan/Sample_Floorplan.jpg',
x: 0,
y: 0,
height: 33.79,
width: 50.0
}];
map.addLayer(imagelayer)
.addLayer(heatmap)
.addLayer(vectorfield)
.addLayer(pathplot)
.addLayer(overlays);
var loadData = function(data) {
mapdata[heatmap.id()] = data.heatmap;
mapdata[overlays.id()] = data.overlays;
mapdata[vectorfield.id()] = data.vectorfield;
mapdata[pathplot.id()] = data.pathplot;
div = d3.select("body").append("div")
.attr("class", "tooltip")
.style("opacity", 0);
d3.select("#demo").append("svg")
.attr("height", 487).attr("width",720)
.datum(mapdata).call(map)
.on("mouseover", function(d) { /* RIGHT HERE*/
div.transition()
.duration(0)
.style("opacity", .9);
div .html("Price: <br>" + /* d.data.price + */ "<br/>Volume: " /* + d.data.volume */)
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - 28) + "px");
})
.on("mouseout", function(d) {
div.transition()
.duration(0)
.style("opacity", 0);
})
;
};
loadData(jsonData);
感谢您的帮助,但是随时鼠标进入整个地图,而不仅仅是多边形。 –
看看这个codepen:https://codepen.io/vitaluha/pen/vxExqy 我已经调整了JavaScript的一点点,现在只有当你把鼠标悬停在红色的多边形上时,工具提示才会显示出来。 – vitaluha
非常好!解决方案似乎很简单。因此,如果我有多个多边形 - 比如20个,那么最好的方法是做什么,以便每个多边形都具有悬停功能? –