Html/D3 工具提示位置问题

Question

I would like to have the Tooltip move over each bar when moused-over/selected. Not sure if this has to do with relative/absolute positioning. I only care about x-axis (horizontal) displacement for now. I am also open to other suggestions as long as the result gets the Tooltip moving over the bars. I foreshadow issues with a large count of bars where the Tooltip will disappear upon scrolling sideways. Thanks.

 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

I added the following style attribute to the tool tip. Setting the position to absolute allows you to position the tool tip where you would like and removes the tooltip from the document flow so other elements aren't perturbed when the tooltip toggles its visibility.

<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>

If you want to position the tooltip over the bar that is being hovered then you can use d3 to position the tooltip based on the data. Something like:

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

And then for css:

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