Question

我使用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 作为索引参数？

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

Answer 2

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

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

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

Answer 4

我发现davedriesmans的答案非常有用，但请注意代码中 chart.tooltipContent（function（key，y，e，graph））不适用于scatterPlot。

这看起来像饼图的功能。在这种情况下，您可以直接使用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>';
    });

如何使用自定义值创建工具提示

4 个答案: