在 d3 力图中缩放 div 工具提示

Question

我是d3和javascript的新手。我在这里构建了这个小提琴，这是一个基本的 d3 力图，带有一个 .onmousover 事件，当用户将鼠标悬停在节点上时，该事件会显示一个div 工具提示

https://jsfiddle.net/1qe1gp06/20/

工具提示中的内容来自节点数据

   var nodes = [
    { x:   width/3, y: height/2, "content":"small" },
    { x: 2*width/3, y: height/2,   "content":"biggerbiggerbiggerbiggerbiggerbigger"}
   ];

D3 Node JavaScript

var node = svg.selectAll('.node')
    .data(nodes)
    .enter().append('circle')
    .attr('class', 'node')
    .on("mouseover", function(d) {
        div.transition()
          .duration(200)
          .style("opacity", .9);
        div.html(d.content + "<br/>" + d.content + "<br/>" + d.content + "<br/>" + d.content + "<br/>" )
          .style("left", (d3.event.pageX) + "px")
          .style("top", (d3.event.pageY - 28) + "px");
        })
        .on("mouseout", function(d) {
        div.transition()
          .duration(500)
          .style("opacity", 0);
        })
                ;

追加div 工具提示

var div = d3.select("body").append("div")
      .attr("class", "tooltip")
      .style("opacity", 0);

用于div 工具提示的 CSS

div.tooltip {
  position: absolute;
  overflow: hidden;
  text-align: center;
  width: 200px;
  height: 50px;
  padding: 2px;
  font: 15px "Courier New";
  color: #F2F3F4;
  background: #5D6D7E;
  border: 1px;
  border-radius: 5px;
  border-style: solid;
  border-color: #BDC3C7;
  pointer-events: none;
}

但是，我不知道如何缩放工具提示，使其根据文本长度或内容中的换行符数进行扩展或收缩。

在此处输入图像描述

这可能是最容易在小提琴中看到的

谁能帮忙？

谢谢

Answer 1

我已经分叉并更新了您的小提琴，我必须进行一些更正才能运行(可能只是一些错别字，与问题无关(。需要改变的是：

div.tooltip {
  width: 200px;
}

自

div.tooltip {
  width: max-content;
}

硬编码宽度将强制实施该宽度，而不管元素内容如何。 max-content基本上会使div 尽可能大，以适应里面的东西。MDN 文档