D3.js 如何创建具有自定义值的工具提示

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

好的，不是一个干净的解决方案，但可以：

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

---

您可以如下方式访问标签变量：

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

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

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

---

我发现davedriesmans的答案非常有用，但是请注意，在代码中 ToolIPContent（函数（键、y、e、图形））不适用于散点图

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

chart.tooltipContent（函数（键、x、y、图形）{
s=“未知”；
pt=getGraphtPt（图，x，y）；
如果（pt！=null）{
//key1下面是我添加到每个点的自定义字符串，可以是'x='+pt.x，也可以是任何自定义字符串
//我发现为每个pt添加自定义字符串字段对于工具提示来说非常方便
s=pt.key1；
}
返回“+”键+s+”；
});

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

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

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

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

然后，您可以像这样获得z值：

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

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

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

---

您已经在使用

.tooltipContent（）

。根据您的描述，听起来函数应该类似于

function（d）{returnd.label；}

。这对您不起作用吗？chart.tooltipContent（函数（d）{return d.label；}）；d给了我钥匙（“PC1”），所以d.label是未定义的。对了，看起来确实好像你只传递了钥匙。这意味着您必须修改NVD3源以传递值。讨论此问题，并在只有一个数据系列的情况下给出解决方案（将数据格式更改为将每个数据点包含在单独的系列中）。P.S工具提示格式功能实际上传递了三个参数，其他参数为x和y值。这并不理想，但您可以使用series、x和y值来过滤数据数组并返回正确的数据元素，包括其标签。