javascript - 在 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);

但在我有限的测试中，我无法让它正常工作。也许这在任何情况下都是一个有用的开始。