javascript - 鼠标悬停工具提示不会固定在右上角

Question

我正在遵循帖子中的代码:

Horizontal Bar Chart D3, .txt file

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 坐标。如何将工具提示放置在固定位置？

Answer 1

将其添加到 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>