我使用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 作为索引参数?
5条答案
按热度按时间hs1rzwqc1#
好吧,不是一个干净的解决方案,但工作:
kmb7vmvb2#
你可以像这样访问你的label变量:
b5lpy0ml3#
较新的NVD3版本使用tooltipGenerator。我也不明白为什么shev72是整个系列的迭代器,我们直接通过NVD3获得系列中的索引,例如。如果我们的数据看起来像这样:
然后你可以像这样得到z值:
sgtfey8w4#
对于在启用了InteractiveGuideline的情况下尝试显示自定义工具提示时遇到问题的任何人,您必须使用以下命令:
chart.interactiveLayer.tooltip.contentGenerator(function (obj) { ... });
作为奖励,下面是添加了自定义值'z'的默认表格布局的代码:
wwwo4jvm5#
我发现davedriesmans的答案非常有用,但是请注意,在代码图表中,tooltipContent(function(key,y,e,graph))不是用于散点图的。
这看起来像一个饼图的函数。在这种情况下,您可以直接使用e.pointIndex来允许您通过graph.series.values [e.pointIndex]索引到系列中。
然而,我构建了davedriesmans建议的散点图函数,如下所示。
插入工具提示的主图表调用只是