Question

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

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

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

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

enter image description here

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

任何人都可以帮忙吗？

感谢

Answer 1

我已经分叉并更新了你的fiddle我必须进行一些修正以便它可以运行（可能只是一些拼写错误而且与问题无关）。需要改变的是：

div.tooltip {
  width: 200px;
}

到

div.tooltip {
  width: max-content;
}

无论元素内容如何，对宽度进行硬编码都会强制执行该宽度。 max-content基本上会使div尽可能大，以适应内部的内容。 MDN Docs

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

1 个答案: