【发布时间】：2017-02-24 22:36:09
【问题描述】：
我正在尝试学习使用 D3 平面图，但我无法理解如何为其添加悬停功能。理想情况下，我希望能够将鼠标悬停在图层上以显示工具提示 - 就像这里的多边形叠加：https://codepen.io/kvyb/pen/QpwGaY?editors=0010
我有工具提示，但我不明白必须在代码中的何处添加它才能使 .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 的新手，所以我在一些事情上苦苦挣扎。即使是关于在哪里寻找解决方案的提示也会非常受欢迎。
【问题讨论】：
标签： javascript d3.js