javascript - Html/D3 工具提示位置问题

Question

我希望当鼠标悬停/选择时工具提示会移动到每个栏上。不确定这是否与相对/绝对定位有关。我现在只关心 x 轴(水平)位移。我也愿意接受其他建议，只要结果使工具提示在栏上移动即可。我预示着大量栏的问题，其中工具提示将在横向滚动时消失。谢谢。

var svg = d3.select("svg"),
  margin = {
    top: 20,
    right: 60,
    bottom: 110,
    left: 40
  },
  width = +svg.attr("width") - margin.left - margin.right,
  height = +svg.attr("height") - margin.top - margin.bottom,

  g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var x = d3.scaleBand()
  .rangeRound([0, width])
  .padding(0.1)
  .align(0.1);

var y = d3.scaleLinear()
  .rangeRound([height, 0]);
var stack = d3.stack()
  .offset(d3.stackOffsetExpand);

var colors = ["orange", "blue", "green"];

var data = [{
  name: "xyhtye",
  Yes: 10,
  No: 0,
  ls1: ['aa'],
  ls2: ['bb']
}, {
  name: "xhetye",
  Yes: 0,
  No: 10,
  ls1: ['aa'],
  ls2: ['bb']
}, {
  name: "xyhety",
  Yes: 0,
  No: 0,
  ls1: ['aa'],
  ls2: ['bb']
}, {
  name: "xyhete",
  Yes: 10,
  No: 0,
  ls1: ['aa'],
  ls2: ['bb']
}, {
  name: "xyhe",
  Yes: 10,
  No: 0,
  ls1: ['aa'],
  ls2: ['bb']
}];
x.domain(data.map(function(d) {
  return d.name;
}));

var serie = g.selectAll(".serie")
  .data(stack.keys(["No", "Yes"])(data))
  .enter().append("g")
  .attr("class", "serie")
  .attr("fill", function(d, i) {
    return colors[i];
  });


var tooltip = d3.select('#tooltip');

var rects = serie.selectAll("rect")
  .data(function(d) {
    return d;
  })
  .enter().append("rect")

rects.attr("x", function(d) {
    return x(d.data.name);
  })
  .attr("y", function(d) {
    return y(d[1]);
  })
  .attr("height", function(d) {
    return y(d[0]) - y(d[1]);
  })
  .attr("width", x.bandwidth())


  .on('mouseover', function(d, i) {
    var thisName = d3.select(this.parentNode).datum().key;
    var thisValue = d.data[thisName];
    var total = d.data.foo + d.data.bar;
    tooltip.html("Name: " + thisName + "<br>Value: " + thisValue + "<br>Percentage: " + thisValue / total + "%");
  });

<script src="https://d3js.org/d3.v4.min.js"></script>
<div id="tooltip">tooltip</div>
<svg width="500" height="500"></svg>

Answer 1

我将以下样式属性添加到工具提示中。将位置设置为绝对允许您将工具提示放置在您想要的位置，并从文档流中删除工具提示，以便当工具提示切换其可见性时其他元素不会受到干扰。

<script src="https://d3js.org/d3.v4.min.js"></script>
<div id="tooltip" style="position:absolute; left: 300px">tooltip</div>
<svg width="500" height="500"></svg>

如果您想将工具提示定位在悬停的栏上，则可以使用 d3 根据数据定位工具提示。像这样的东西:

d3.selectAll( ".tooltip").data( data )
      .enter()
      .append('div')
         .attr("class", "tooltip")
         .attr( "left", (d)=> x( d.data.name) )
         .style("opacity", 0)

然后是 CSS:

.tooltip {
  width: 100px;
  height: 100px;
  position: absolute;
  opacity: 0;
  transition: .66s;
}
.tooltip:hover {
    opacity: 1;
}