Question

我需要在D3图表的图例上显示工具提示。我阅读了文档，但找不到图例是否支持工具提示。但是，我能够找到鼠标悬停事件。

我想用Java脚本函数在光标附近渲染一个表。

我有以下方法：

/**
 * Creates legend
 * barData - data from given (i.e. mouse is currently hover it)
 */
function createLegendTooltip(data) {
    var tooltip =
        '<table><tr>' +
        '<td>' +
        '<div style="width:10px;height:10px;border:1px solid #000;background-color:' + data.color + '"></div>' +
        '</td><td>' +
        data.instance +
        '</td></tr><tr><td> </td><td>' +
         data.saver + ', karan' + data.saveTime +
        '</td></tr></table>';
        return tooltip;
}

tooltip具有我要显示的正确数据，但是我无法弄清楚如何在光标附近呈现此数据。

Answer 1

body。在鼠标悬停事件中，可以使用pageX和pageY获取鼠标位置。然后，您知道鼠标在屏幕上的位置。使用此信息，您可以创建一个div并将其放置在鼠标所在的位置。您可以使用从createLegendTooltip返回的html字符串，然后使用.innerHTML

将其应用于div

以下是非常普通的示例。还有更多要做的事情。例如，设置z-index并创建一个函数，如果您希望在鼠标移动时移动coolDiv，它会更新coolDiv的位置。

var coolDiv = document.createElement('div');
coolDiv.innerHTML = createLegendTooltip(data);
coolDiv.style.left = yourValueYouGetFrom_pageX;
coolDiv.style.top = yourValueYouGetFrom_pageY;
document.body.appendChild(coolDiv);

使用JS函数在光标附近生成和呈现html内容

1 个答案: