nvd3中累积线图上的自定义工具提示答案

【问题标题】：custom tooltip on cumulativeLineChart in nvd3nvd3中累积线图上的自定义工具提示
【发布时间】：2013-06-26 12:15:04
【问题描述】：

当我将鼠标悬停在累积折线图的线条上时，我会在某个 y 时间收到一条工具提示消息 x 值。我想编辑这条消息并添加更多内容。

因为在我的值数组中，我有一个包含 {X:x, Y:y, Z:z, Dt:date} 的 json，我希望显示一条自定义消息，列出日期的 X/Y/Z。

【问题讨论】：

您可以尝试在cumulativeLineChart.js 中编辑它。在 line 25 中添加你的字符串。可能不是最好的方法，但可以解决您的问题。

标签： d3.js nvd3.js

【解决方案1】：

我使用的是 nvd3 版本 1.1.15b。

调用.tooltip() 对我不起作用，但调用.tooltipContent() 可以，如下代码所示：

        var chart = nv.models.pieChart()
            .x(function (d) { return d.file; })
            .y(function (d) { return d.size; })
            .tooltipContent(function (key, y, e, graph) {
                return '<h3>' + key + '</h3>' +
                    '<p>' + e.value.toSizeFmt() + '</p>';
            })

正如Andrei 上面指出的那样，e 参数提供对原始值的访问，以便您可以格式化它们，而不是使用已经格式化的文本y。希望这会有所帮助！

【讨论】：

【解决方案2】：

如果你还没有找到合适的解决方案，你可以试试这个 -

nv.addGraph(function() {
    var chart = nv.models.cumulativeLineChart().x(function(d) {
        return d[0]
    }).y(function(d) {
        return d[1]
    }).color(d3.scale.category10().range()).tooltip(function(key, x, y, e, graph) {
        return '<h3>' + key + ' Custom Text Here ' + x + '</h3> here' + '<p> or here ,' + y + '</p>'
    });
});

希望对你有帮助。

【讨论】：

太好了，这对我来说非常有效。只是补充一点信息，每个数据节点的附加数据可以通过'e'参数访问，e.point.Z会得到Z的值。