鼠標懸停提示不會保持固定在右上角

data = [{"class":"C 1","nums":{"A":716, "B":1287, "C":249}} 
,{"class":"C 2","nums":{"A":2000, "B":1876, "C":3009}} 
,{"class":"C 3","nums":{"A":899, "B":2333, "C":418}}]; 

data.forEach(function(d){ 
    var values = 0; 
    for (var key in d.nums){ 
     values += d.nums[key] 
    } 
    d.total = values; 
    }); 

var div = d3.select("body").append("div").attr("class", "toolTip"); 

var xScale = scale = d3.scale.linear() 
      .domain([0, d3.max(data, function(d) { return d.total; })]) 
      .range([0, 400]); 

var svg = d3.select('body') 
      .append("svg") 
      .attr("width", 400) 
      .attr("height", 400); 

var bars = svg.selectAll(".rects") 
      .data(data) 
      .enter() 
      .append("rect"); 

bars.attr("x", 0).attr("y", function(d,i){ return i*50}) 
    .attr("height", 40) 
.attr("fill", "teal") 
    .attr("width", function(d){ return xScale(d.total)}); 

bars.on("mousemove", function(d){ 
       div.style("left", d3.event.pageX+10+"px").style("top", d3.event.pageY-25+"px").style("display", "inline-block").html("All the values: A=" + d.nums.A + ", B=" + d.nums.B + ", C=" + d.nums.C); 
      }).on("mouseout", function(d){ 
       div.style("display", "none"); 
      });

我所試圖做的是固定在右下角的提示。我知道該位置需要設置爲固定在bars.on（「mousemove」...）中，但我很難將屬性設置爲某些固定的x，y座標。如何在固定位置放置工具提示？

來源

2016-10-11 Mr.Roboto

此加入CSS：

.toolTip{ 
    position:absolute; 
    bottom: 0; 
    right: 0; 
    }

而且從鼠標懸停刪除此：

div.style("left", d3.event.pageX+10+"px") 
.style("top", d3.event.pageY-25+"px") 
.style("display", "inline-block") 
.html("All the values: A=" + d.nums.A + ", B=" + d.nums.B + ", C=" + d.nums.C);

工作例如：

data = [{ 
 
    "class": "C 1", 
 
    "nums": { 
 
    "A": 716, 
 
    "B": 1287, 
 
    "C": 249 
 
    } 
 
}, { 
 
    "class": "C 2", 
 
    "nums": { 
 
    "A": 2000, 
 
    "B": 1876, 
 
    "C": 3009 
 
    } 
 
}, { 
 
    "class": "C 3", 
 
    "nums": { 
 
    "A": 899, 
 
    "B": 2333, 
 
    "C": 418 
 
    } 
 
}]; 
 

 
data.forEach(function(d) { 
 
    var values = 0; 
 
    for (var key in d.nums) { 
 
    values += d.nums[key] 
 
    } 
 
    d.total = values; 
 
}); 
 

 
var div = d3.select("body").append("div").attr("class", "toolTip"); 
 

 
var xScale = scale = d3.scale.linear() 
 
    .domain([0, d3.max(data, function(d) { 
 
    return d.total; 
 
    })]) 
 
    .range([0, 400]); 
 

 
var svg = d3.select('body') 
 
    .append("svg") 
 
    .attr("width", 400) 
 
    .attr("height", 400); 
 

 
var bars = svg.selectAll(".rects") 
 
    .data(data) 
 
    .enter() 
 
    .append("rect"); 
 

 
bars.attr("x", 0).attr("y", function(d, i) { 
 
    return i * 50 
 
    }) 
 
    .attr("height", 40) 
 
    .attr("fill", "teal") 
 
    .attr("width", function(d) { 
 
    return xScale(d.total) 
 
    }); 
 

 
bars.on("mousemove", function(d) { 
 
    div 
 
// .style("left", d3.event.pageX + 10 + "px") 
 
    //.style("top", d3.event.pageY - 25 + "px") 
 
    .style("display", "inline-block") 
 
    .html("All the values: A=" + d.nums.A + ", B=" + d.nums.B + ", C=" + d.nums.C); 
 
}).on("mouseout", function(d) { 
 
    div.style("display", "none"); 
 
});

.toolTip{ 
 
    position:absolute; 
 
    bottom: 0; 
 
    right: 0; 
 
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

來源

2016-10-11 15:15:11 thatOneGuy

鼠標懸停提示不會保持固定在右上角

回答

相關問題