将工具提示添加到Dimple.js中的行

Question

我以Dimple的折线图为基础创建了简化的网络风格图表。示例：http://jsfiddle.net/cc1gpt2o/

  myChart.addCategoryAxis("x", "Entity");
  myChart.addCategoryAxis("y", "Entity").addOrderRule("Keyword");
  var z = myChart.addMeasureAxis("z", "Size");
  z.overrideMin = 0;
  z.overrideMax = 200;
  myChart.addSeries("Keyword", dimple.plot.line);
  myChart.addSeries("Keyword", dimple.plot.bubble);
  myChart.draw();

但是，折线图的工具提示仅在将鼠标悬停在点上时显示。由于存在许多重叠点，用户很难识别线和值。最好是用户在点之间的线上悬停时可以看到工具提示。

我发现了一种D3方法，它将线一分为二以显示有关点的信息，但它似乎太复杂了，无法应用于我正在使用的设置：-http://www.d3noob.org/2014/07/my-favourite-tooltip-method-for-line.html

在我深入探讨这个解决方案之前，有没有一种更简单的方法可以在Dimple中做到这一点？（例如，将圆的工具提示功能应用于路径？）

Answer 1

不幸的是，据我所知，series.addEventHandler('mouseover', handler)只有在您超过线的点时才会触发，所以并不比默认功能好。要瞄准线路本身，您必须使用常规d3:

chart.series[0].shapes.on('mouseover', function(e){
   //handle
   // `e` is data from line
   // d3.event has mouse position data
});

您可以在该事件对象中获取有关行本身（与该行绑定的数据）的信息。不幸的是，它与dimple.eventArgs对象的数据不同，因此您将无法使用dimple._showPointTooltip或其他工具提示方法（我认为这无论如何都不起作用）。

在该处理程序函数内部，您还可以从d3.event获取有关x和y鼠标位置的信息。将这两个对象的信息组合在一起，可以将自定义工具提示定位在当前鼠标位置，并且可以将其设置为类似于标准凹坑工具提示的样式。

我不太确定的是如何获得鼠标所在位置的原始对应值。我认为它应该是这样的：

chart.series[0].y._scale.invert(d3.event.y);

但在我有限的测试中，我无法使其正常工作。也许这无论如何都是一个有益的开始。