d3.js - nvd3中累积线图上的自定义工具提示

Question

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

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

Answer 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已经格式化的文本。希望这可以帮助！

Answer 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>'
    });
});

希望能帮助到你。