如何创建具有自定义值的工具提示答案

【问题标题】：How to create a tooltip with custom value如何创建具有自定义值的工具提示
【发布时间】：2014-02-03 16:14:40
【问题描述】：

我使用 NVD3 作为散点图，但是当悬停在工具提示上时，我想要标签而不是键。

这是我的 json：

long_data = [ 
  {
    key: 'PC1',
    color: '#00cc00',
    values: [
      { 
        "label" : "Lichtpuntje" ,
        "x" : 11.16,
        "y" : -0.99,
        "size":1000,
        "color": '#FFCCOO'
      } , 
      { ....

这是js

nv.addGraph(function() {

chart = nv.models.scatterChart()
            .showDistX(true)
            .showDistY(true)
            .useVoronoi(true)
            .color(d3.scale.category10().range())
            .transitionDuration(300)
       ...
      chart.xAxis.tickFormat(d3.format('.02f'));
      chart.yAxis.tickFormat(d3.format('.02f'));
      chart.tooltipContent(function(i) { return labelArray[i];  });

      d3.select('#test1 svg')
          .datum(long_data)
          .call(chart);
      ...

我怎样才能让工具提示具有标签值？或者我怎样才能将 i 作为索引参数？

【问题讨论】：

您已经在使用.tooltipContent()。根据您的描述，听起来该功能应该类似于function(d) { return d.label; }。这不适合你吗？
chart.tooltipContent(function(d) { return d.label; }); d 给了我密钥（“PC1”），所以 d.label 是未定义的
啊，对了，看起来确实好像您只是通过了密钥。这意味着您必须修改 NVD3 源来传递值。
This answer 讨论了这个问题，并在您只有一个数据系列时给出了解决方案（您将数据格式更改为将每个数据点放在一个单独的系列中）。
P.S 工具提示格式化函数实际上得到了三个参数，其他的是 x 和 y 值。这并不理想，但您可以使用系列、x 和 y 值来过滤数据数组并返回正确的数据元素，包括其标签。

标签： d3.js nvd3.js

【解决方案1】：

好的，不是一个干净的解决方案，但有效：

chart.tooltipContent(function(key, y, e, graph) { 
      labelIndex=arrayContains(resultYVal, e);
      return resultLabel[labelIndex];
});

function arrayContains(a, obj) {
   var i = a.length;
   while (i--) {
      if (a[i] == obj) {
          return i;
      }
   }
   return false;
}

【讨论】：

【解决方案2】：

您可以像这样访问您的标签变量：

chart.tooltipContent(function(graph) {
  console.log(graph); //examine the graph object in the console for more info
  return graph.point.label;
});

【讨论】：

【解决方案3】：

较新的 NVD3 版本使用 tooltipGenerator。另外我不明白为什么 shev72 是整个系列的迭代器，我们直接通过 NVD3 获取系列中的索引，例如如果我们的数据如下所示：

data = [{"key": "Group 0", "values": [{"y": 1.65166973680992, "x": 0.693722035658137, "z": "SRR1974855"}, {"y": 1.39376073765462, "x": -0.54475764264808, "z": "SRR1974854"}]

然后你可以像这样得到你的 z 值：

chart.tooltip.contentGenerator(function (d) {
      var ptIdx = d.pointIndex;
      var serIdx = d.seriesIndex;
      z = d.series[serIdx].values[ptIdx].z
      return z;
    });

【讨论】：

【解决方案4】：

我发现 davedriesmans 的答案非常有用，但请注意在代码中 chart.tooltipContent(function(key, y, e, graph)) 不适用于散点图。

这看起来像饼图的函数。在这种情况下，您可以直接使用 e.pointIndex 以允许您通过 graph.series.values[e.pointIndex] 对系列进行索引。

但是，我构建了 davedriesmans 建议的散点图函数，如下所示。

function getGraphtPt(graph, x1, y1) {
    var a = graph.series.values;
    var i = a.length;       
    while (i--) {
     if (a[i].x==x1 & a[i].y==y1) {
       return a[i];
     }
    }
   return null;
}

插入工具提示的主图表调用只是

  chart.tooltipContent(function (key, x, y, graph) {
        s = "unknown";
        pt = getGraphtPt(graph, x, y);
        if (pt != null) {
 //below key1 is a custom string I added to each point, this could be 'x='+pt.x, or any custom string
// I found adding a custom string field to each pt to be quite handy for tooltips
            s = pt.key1; 
        }
        return '<h3>' + key + s + '</h3>';
    });

【讨论】：