在d3中使用div工具提示与使用g工具提示

Question

假设我想在我正在开发的图表中添加工具提示，我可以使用常规html元素，例如div，或者我可以在g内部使用svg元素。

我想知道使用div工具提示之间的主要区别是什么：

var tooltip = d3.select('body')
  .append('div')
    .style('position', 'absolute')
    .style('display', 'none');

然后移动它并使用

进行修改

selection.on('someEvent', () => {
    tooltip
        .style('display', null)
        .style('top', mouseY + 'px')
        .style('left', mouseX + 'px')
        ... /* do what needs to be done */
});

或选择g元素：

var tooltip = d3.select('svg')
  .append('g')
    .style('display', 'none');

然后使用transform属性

在需要的地方进行翻译

selection.on('someEvent', () => {
    tooltip
        .attr('transform', 'translate(' + mouseX + ',' + mouseY + ')')
        .style('display', null)
        ... /* do what needs to be done */
});

个人我更喜欢g元素因为看起来不像黑客，但是在管理工具提示中实际上可能有点笨拙。 所以我真的很困惑这些家伙，有什么帮助吗？

Answer 1

股利

优点

• 内容更灵活，反应灵敏，可以包装大文本
• 工具提示可以在SVG之外显示

<强>缺点

• 在所需的地方有点难以定位

克

优点

• 定位有点容易
• 它的内容比div更稳固

<强>缺点

• 如果您有大尺寸的工具提示，则会修剪外部svg的一部分
• 复杂的工具提示内容需要更多时间