Fix api.tooltip.show in d3.v4

7 years ago · 70b6cb216f
4 changed files with 47 additions and 29 deletions
--- a/htdocs/samples/api_tooltip_show.html
+++ b/htdocs/samples/api_tooltip_show.html
@ -5,7 +5,7 @@
  <body>
    <div id="chart"></div>

-    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
+    <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
    <script src="/js/c3.js"></script>
    <script>
      var chart = c3.generate({
@ -14,25 +14,48 @@
            ['data1', 30, 200, 100, 400, 150, 250],
            ['data2', 50, 20, 10, 40, 15, 25]
          ],
+        },
+        zoom: {
+            enabled: true,
+            initialRange: [0.8,3.2],
        }
      });

      setTimeout(function () {
-        chart.tooltip.show({ x: 1 });
+        chart.tooltip.show({ x: 2 });
      }, 1000);

      setTimeout(function () {
-        chart.tooltip.show({ index: 3 });
+        chart.tooltip.show({ x: 1 });
      }, 2000);

      setTimeout(function () {
-        chart.tooltip.show({ data: {x: 2} });
+        chart.tooltip.show({ data: {x: 3, id: 'data1', value: 400} });
      }, 3000);

      setTimeout(function () {
        chart.tooltip.hide();
      }, 4000);

+      setTimeout(function () {
+        chart.internal.config.tooltip_grouped = false;
+        chart.tooltip.show({ x: 2 });
+      }, 5000);
+
+      setTimeout(function () {
+//        chart.internal.config.tooltip_grouped = false;
+        chart.tooltip.show({ x: 1, id: 'data2' });
+      }, 6000);
+
+      setTimeout(function () {
+//        chart.internal.config.tooltip_grouped = false;
+        chart.tooltip.show({ data: {x: 3, id: 'data1', value: 400} });
+      }, 7000);
+
+      setTimeout(function () {
+        chart.tooltip.hide();
+      }, 8000);
+
    </script>
  </body>
 </html>
--- 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
--- 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;
--- 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,