Question

我正试图在moues上添加一个工具提示到我的甜甜圈片上，如下所示：

var tooltip = select("g.arc--first")
    //.append("div") // if I add this div here it stops working
    .append("text")

firstSlice.append('path')
    .attr('d', coolArc(firstRadius, thickness))
    .attr('class', d => `fill_${weightScale(d.data.weight)}`)
    .on('mouseover', (d) => {
       tooltip.style("visibility", "visible")
              .text(this.nodeByName.get(d.data.name)["Short Description"])
              .style("fill", "red")
              .style("position", "absolute")
              .style("text-align", "center")
              .style("width", "60px")
              .style("height", "28px")
              .style("padding", "2px")
              .style("background", "lightsteelblue")
              .style("border", "10px")
    })

我的目标是提供类似于http://bl.ocks.org/d3noob/a22c42db65eb00d4e369的工具提示，但现在它只在页面中间显示一个红色文字。我想我需要一个新的div但是当我尝试添加append("div")时它会停止工作并且不再显示文本。我该如何解决？

Answer 1

您提到的示例中的工具提示非常简单。它被附加为body的子元素（您尝试将其作为g元素的子元素追加，但是您不能将html元素附加到svg中）。所以你应该改变你的代码：

var tooltip = select('body')
    .append('div')
    .attr('class', 'tooltip');

我还建议您在css中设置此工具提示的样式（在css文件中添加适当的类名和规则），在这种情况下可以避免链接许多.style方法。您应该设置position: absolute;规则 - 您可以更新top和left样式，并将工具提示放在您需要的位置。同时设置visibility: hidden规则 - 默认情况下应隐藏工具提示。

在mouseover事件处理程序中，您需要更改：

visibility样式显示工具提示

用于定位工具提示的

left和top样式

text更新工具提示上的文字

.on('mouseover', (d) => {
  tooltip
    .style('visibility', 'visible')
    .style('left', d3.event.pageX + 'px')
    .style('top', d3.event.pageY + 'px')
    .text(d);
})

在mouseout事件处理程序中，您应该隐藏工具提示：

.on('mouseout', (d) => {
  tooltip
    .style('visibility', 'hidden')
});

请参阅以下隐藏代码段中的简化演示：

var tooltip = d3.select("body")
    .append("div")
    .attr('class', 'tooltip');
    
d3.selectAll('circle')
	.data(['one', 'two', 'three'])
	.on('mouseover', (d) => {
  	tooltip
    	.style('visibility', 'visible')
    	.style('left', d3.event.pageX + 'px')
    	.style('top', d3.event.pageY + 'px')
      .text(d);
	})
  .on('mouseout', (d) => {
  	tooltip
    	.style('visibility', 'hidden')
	})

.tooltip {
  background-color: lightblue;
  font-weight: bold;
  padding: 5px;
  border-radius: 9px;
  position: absolute;
  display: inline-block;
  margin-top: -50px;
  visibility: hidden;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.js"></script>
<svg width="720" height="120">
  <circle cx="20" cy="60" r="10"></circle>
  <circle cx="180" cy="60" r="10"></circle>
  <circle cx="340" cy="60" r="10"></circle>
</svg>

将工具提示添加到甜甜圈切片

1 个答案: