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

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

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

1 个答案: