NVD3.js y轴和工具提示不同的精度答案

【问题标题】：NVD3.js yAxis and tooltip different percisionNVD3.js y轴和工具提示不同的精度
【发布时间】：2013-10-17 10:34:44
【问题描述】：

我正在使用 NVD3.js 显示多折线图。

我希望 yAxis 显示为 2 个十进制数字

已编辑答案

 var chart;

    nv.addGraph(function () {
        chart = nv.models.lineChart()
        .options({
            margin: { left: 140, bottom: 50 },
            x: function (d, i) {
                return i;
            },
            showXAxis: true,
            showYAxis: true,
            transitionDuration: 250,
            tooltips: true,
            tooltipContent: function (key, x, y, e, graph) {
                return '<h3>' + key + '</h3>' +
                       '<p>' + e.point.y + ' at ' + x + '</p>'
            }
        });

        // chart sub-models (ie. xAxis, yAxis, etc) when accessed directly, return themselves, not the parent chart, so need to chain separately
        chart.xAxis
            .axisLabel("Maturity")
            .tickFormat(function(d) { return pivotedData[0].values[d].x; });

        chart.yAxis
            .axisLabel('Model Spread').tickFormat(d3.format(',.2f'));


        d3.select('#chart1 svg')
          .datum(pivotedData)
          .call(chart);

        //TODO: Figure out a good way to do this automatically
        nv.utils.windowResize(chart.update);

        chart.dispatch.on('stateChange', function (e) { nv.log('New State:', JSON.stringify(e)); });

        return chart;
    });

但在工具提示中我想显示到小数点后 12 位。

这可能吗？

【问题讨论】：

标签： javascript d3.js nvd3.js

【解决方案1】：

您可以通过图表对象的.tooltipContent设置调用的函数来格式化工具提示的内容。默认函数定义如下。

tooltip = function(key, x, y, e, graph) {
    return '<h3>' + key + '</h3>' +
           '<p>' +  y + ' at ' + x + '</p>'
}

您可以根据自己的喜好在其中格式化y 的值。请注意，y 定义为

yAxis.tickFormat()(lines.y()(e.point, e.pointIndex))

这意味着轴的刻度格式会影响它，所以为了在那里获得更高的精度，你需要直接获取值——lines可以通过chart.lines访问。

【讨论】：

我确实尝试编辑该函数，但它对工具提示没有影响
您使用的是最新版本的 NVD3（来自源存储库）吗？您使用的是哪种图表类型？
是的，我昨天拉了它，我正在使用 lineChart 模型。图表 = nv.models.lineChart()
那时应该可以工作了。请给我们完整的代码好吗？
@LarsKotthoff - 我假设一旦使用 .tickFormat(d3.format(',.2f')) 将数据格式化到小数点后 2 位，即使数据显示在工具提示。那么是否可以使用y 在工具提示中显示 12 位小数

【解决方案2】：

在 nvd3 源中，它们有这样的线条（折线图）：

 interactiveLayer.dispatch.on('elementMousemove', function(e) {
  ...
      var xValue = xAxis.tickFormat()(chart.x()(singlePoint,pointIndex));
      interactiveLayer.tooltip
              .position({left: pointXLocation + margin.left, top: e.mouseY + margin.top})
              ...
              .valueFormatter(function(d,i) {
                 return yAxis.tickFormat()(d);
              })
              .data(
                  {
                    value: xValue,
                    series: allData
                  }
              )();
...
}

因此，如果您想覆盖类似 tooltip.contentGenerator 的内容，您就会被它提供给您的数据所困。我认为这样做的一个好方法是为工具提示 x 格式化程序或其他东西设置一个设置器，然后它将在轴格式化程序上使用它。或者只是将原始数据连同值和序列一起发送。

我的用例是我在图表上显示 7 天的时间刻度，我只勾选每天的开始。但是，在工具提示中，我想更详细地了解该数据。

这是我针对指南工具提示的拉取请求

https://github.com/novus/nvd3/pull/444

调用：chart.tooltipXAxisFormatter(d3.time.format(toolTipFormat));将设置它。

【讨论】：