Question

我有一组d3绘图，如下所示，其中工具提示div放置在绘图div下方。

<div class="row">
            <div class="col-md-4">
              <div id="plot1"></div>
              <div id="plot1-tooltip" class="tooltip"></div>
              <div id="plot2"></div>
              <div id="plot2-tooltip" class="tooltip"></div>
              <div id="plot3"></div>
              <div id="plot3-tooltip" class="tooltip"></div>
            </div>
</div>

我的问题是，当工具提示变得可见时，下部地块会腾出空间。我不想为div使用该空间，因为它正在消耗实际上并未使用的房地产。因此，我不想提前为工具提示腾出空间来解决此问题。

工具提示div的位置是相对的，由鼠标设置。有没有办法防止跳跃发生？

编辑：

我尝试过的事情：

将div放置在foreignObject标记内的svg中，但div从未显示
在不可见的类的底部添加了100px
将工具提示div左右浮动

编辑2

tooltipData = [1, 2, 3]

svg = d3.select("#plot1").append("svg")
  .attr("width", 50)
  .attr("height", 50)

listener = svg.append("rect")
  .attr("width", 50)
  .attr("height", 50)
  .attr("fill", "blue")

tooltipDiv = d3.select("#plot1-tooltip")
  .style("position", "relative")
  .style("width", "-webkit-fit-content")
  .style("padding", "5px")

tooltiptable = tooltipDiv.append("table")

tooltiprows = tooltiptable.selectAll("tr")
  .data(tooltipData)
  .enter()
  .append("tr")

svg2 = d3.select("#plot2").append("svg")
  .attr("width", 50)
  .attr("height", 50)
  .attr("fill", "blue")

svg2.append("rect")
  .attr("width", 50)
  .attr("height", 50)


listener
  .on("mousemove", function() {

    tooltipDiv
      .style("left", (d3.mouse(this)[0]) + "px")
      .style("top", (d3.mouse(this)[1]) + "px")

    tooltiptable.selectAll("tr")
      .html(function(d, i) {
        return "<td>" + d + "</td>"
      })
  })

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.0.2/d3.min.js"></script>
<div class="row">
  <div class="col-md-4">
    <div id="plot1"></div>
    <div id="plot1-tooltip" class="tooltip"></div>
    <div id="plot2"></div>
    <div id="plot2-tooltip" class="tooltip"></div>
  </div>
</div>

D3.js工具提示div占用空间

0 个答案: