Добавление всплывающей подсказки в строку в 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 или другие методы подсказки (я не думаю, что это все равно сработало).

Вы также можете получить информацию о положениях x и y мыши от d3.event, находясь внутри этой функции обработчика. Комбинирование информации из этих двух объектов должно позволить вам позиционировать пользовательскую подсказку в текущей позиции мыши, и вы, вероятно, могли бы создать ее, чтобы она выглядела как стандартная всплывающая подсказка.

Я не уверен, как получить исходное соответствующее значение для вашей мыши. Я считаю, что это должно быть что-то вроде:

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

но в моем ограниченном тестировании я не мог заставить это работать правильно. Возможно, это будет полезно начать в любом случае.