javascript - nvd3 散点图的自定义 x 轴工具提示

Question

我正在使用 nvd3 散点图，我看到可以使用以下函数自定义工具提示内容。

chart.tooltipContent(function (key, x, y, e, graph) {
    return '<p><strong>' + key + '</strong></p>' +
           '<p>' + e.value + ' in the month ' + x + '</p>';
    });

当鼠标移到气泡上时，自定义工具提示内容以及点/气泡的 x 值和 y 值将突出显示/显示。我不想显示 x 轴标签，而是想显示自定义内容。我该怎么做？

谢谢，

Answer 1

chart.tooltipContent 现在已在 nvd3 中弃用。要在工具提示中使用自定义内容，您需要使用

chart.tooltip.contentGenerator(function(obj) {code to build tooltip})

为了查看您必须在函数中使用哪些数据，请先添加以下行:

chart.tooltip.contentGenerator(function (obj) { return JSON.stringify(obj)})

然后您可以将鼠标悬停在数据点上并查看您正在使用的对象。

在 src/tooltip.js 中查看用于 contentGenerator 的默认函数 starting around line 76查看您可以构建并传递给 contentGenerator 的函数类型的一个很好的示例

这是文档中的相关部分 documentation