D3将悬停功能添加到平面图层

Question

我想学习使用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的新手，所以我很苦恼。即使是在哪里寻找解决方案的提示也非常受欢迎。

Answer 1

看看下面
。对（“鼠标悬停”）...去你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);