Question

我有一个div工具提示，我想在使用D3创建的SVG圈子中心。我的mouseover事件触发div的'hidden'类为false。

因为div是隐藏的，所以我无法计算它的宽度，因此无法按照我想要的方式将div放在圆圈上：

var width = document.getElementById("tooltip").offsetWidth;

...

.style("left", xPosition - (width/2) + "px" )

有没有办法解决这个问题？

值得注意的是，我不希望div具有固定的宽度。

var w = 300, h = 500;

var svg = d3.select('body').append('svg').attr('width', w).attr('height', h)

svg.append('circle').attr('r', 20)
  .attr('cx', 200)
  .attr('cy', 300)
  .on("mouseover", function(d) {
    var xPosition = parseFloat(d3.select(this).attr("cx"));
    var yPosition = parseFloat(d3.select(this).attr("cy"));
    var width = document.getElementById("tooltip").offsetWidth;

    d3.select("#tooltip")
      .style("left", xPosition - (width/2) + "px" )
      .style("top", yPosition + "px")
      .select("#value")
      .text(d);

    d3.select("#tooltip").classed("hidden", false);
  })

  .on("mouseout", function() {
    d3.select("#tooltip").classed("hidden", true);
  })

Answer 1

您必须首先为div提供除“none”以外的显示值。然后你得到它的宽度。然后你可以定位它。

如果您不希望用户看到div跳转，请在定位时为其指定样式可见性：隐藏：

CSS：

.hidden {
    display: none;
    visibility: hidden;
}

JS：

d3.select("#tooltip").style("display", "block");
// your div is still invisible, but now has a width.
// get its width and position it now
d3.select("#tooltip").classed("hidden", false); // now it will appear

如果再次隐藏它，请不要忘记重置display样式！

查找CSS隐藏的div宽度

1 个答案: