From 70b6cb216f6372e606eaa82302d5093e11357e78 Mon Sep 17 00:00:00 2001 From: Masayuki Tanaka Date: Mon, 8 Jan 2018 14:26:50 +0900 Subject: [PATCH] Fix api.tooltip.show in d3.v4 --- htdocs/samples/api_tooltip_show.html | 31 ++++++++++++++++++++---- src/api.tooltip.js | 36 +++++++++++++--------------- src/data.js | 5 ---- src/interaction.js | 4 ++++ 4 files changed, 47 insertions(+), 29 deletions(-) diff --git a/htdocs/samples/api_tooltip_show.html b/htdocs/samples/api_tooltip_show.html index b4a82b5..5f81d12 100644 --- a/htdocs/samples/api_tooltip_show.html +++ b/htdocs/samples/api_tooltip_show.html @@ -5,7 +5,7 @@
- + diff --git a/src/api.tooltip.js b/src/api.tooltip.js index 4f0b3cc..5ade853 100644 --- a/src/api.tooltip.js +++ b/src/api.tooltip.js @@ -3,36 +3,32 @@ import { isValue } from './util'; c3_chart_fn.tooltip = function () {}; c3_chart_fn.tooltip.show = function (args) { - var $$ = this.internal, index, mouse; + var $$ = this.internal, targets, data, mouse = {}; // determine mouse position on the chart if (args.mouse) { mouse = args.mouse; } - - // determine focus data - if (args.data) { - if ($$.isMultipleX()) { - // if multiple xs, target point will be determined by mouse - mouse = [$$.x(args.data.x), $$.getYScale(args.data.id)(args.data.value)]; - index = null; - } else { - // TODO: when tooltip_grouped = false - index = isValue(args.data.index) ? args.data.index : $$.getIndexByX(args.data.x); + else { + // determine focus data + if (args.data) { + data = args.data; } - } - else if (typeof args.x !== 'undefined') { - index = $$.getIndexByX(args.x); - } - else if (typeof args.index !== 'undefined') { - index = args.index; + else if (typeof args.x !== 'undefined') { + if (args.id) { + targets = $$.data.targets.filter(function(t){ return t.id === args.id; }); + } else { + targets = $$.data.targets; + } + data = $$.filterByX(targets, args.x).slice(0,1)[0]; + } + mouse = data ? $$.getMousePosition(data) : null; } // emulate mouse events to show - $$.dispatchEvent('mouseover', index, mouse); - $$.dispatchEvent('mousemove', index, mouse); + $$.dispatchEvent('mousemove', mouse); - $$.config.tooltip_onshow.call($$, args.data); + $$.config.tooltip_onshow.call($$, data); }; c3_chart_fn.tooltip.hide = function () { // TODO: get target data by checking the state of focus diff --git a/src/data.js b/src/data.js index 275c516..8d8e3a6 100644 --- a/src/data.js +++ b/src/data.js @@ -23,11 +23,6 @@ c3_chart_internal_fn.getXValuesOfXKey = function (key, targets) { }); return xValues; }; -c3_chart_internal_fn.getIndexByX = function (x) { - var $$ = this, - data = $$.filterByX($$.data.targets, x); - return data.length ? data[0].index : null; -}; c3_chart_internal_fn.getXValue = function (id, i) { var $$ = this; return id in $$.data.xs && $$.data.xs[id] && isValue($$.data.xs[id][i]) ? $$.data.xs[id][i] : i; diff --git a/src/interaction.js b/src/interaction.js index d0a875f..6ea87bf 100644 --- a/src/interaction.js +++ b/src/interaction.js @@ -133,6 +133,10 @@ c3_chart_internal_fn.redrawEventRect = function () { ) : function () {} ); }; +c3_chart_internal_fn.getMousePosition = function (data) { + var $$ = this; + return [$$.x(data.x), $$.getYScale(data.id)(data.value)]; +}; c3_chart_internal_fn.dispatchEvent = function (type, mouse) { var $$ = this, selector = '.' + CLASS.eventRect,