Question

我正在努力学习使用D3平面图，但我无法理解如何添加悬停功能。理想情况下，我希望能够将鼠标悬停在图层上以显示工具提示 - 就像这里的多边形叠加层一样：https://codepen.io/kvyb/pen/QpwGaY?editors=0010

我有工具提示，但我无法理解我必须在.on（＆＃34; mouseover＆＃34;）的代码中添加它...才能工作。

这是代码：

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

查看以下
.on（＆＃39; mouseover＆＃39;）... 进入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);

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

1 个答案: