playground
/
c3
mirror of https://github.com/masayuki0812/c3.git
1
0
Fork 0
Code Issues Releases Activity
Browse Source

Fix api.tooltip.show in d3.v4

pull/2246/head
Masayuki Tanaka 7 years ago
parent
aecf299956
commit
70b6cb216f
4 changed files with 47 additions and 29 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 31
      htdocs/samples/api_tooltip_show.html
  2. 36
      src/api.tooltip.js
  3. 5
      src/data.js
  4. 4
      src/interaction.js

31
htdocs/samples/api_tooltip_show.html
Unescape View File

@ -5,7 +5,7 @@
<body> <body>
<div id="chart"></div> <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 src="/js/c3.js"></script>
<script> <script>
var chart = c3.generate({ var chart = c3.generate({
@ -14,25 +14,48 @@
['data1', 30, 200, 100, 400, 150, 250], ['data1', 30, 200, 100, 400, 150, 250],
['data2', 50, 20, 10, 40, 15, 25] ['data2', 50, 20, 10, 40, 15, 25]
], ],
},
zoom: {
enabled: true,
initialRange: [0.8,3.2],
} }
}); });
setTimeout(function () { setTimeout(function () {
chart.tooltip.show({ x: 1 }); chart.tooltip.show({ x: 2 });
}, 1000); }, 1000);
setTimeout(function () { setTimeout(function () {
chart.tooltip.show({ index: 3 }); chart.tooltip.show({ x: 1 });
}, 2000); }, 2000);
setTimeout(function () { setTimeout(function () {
chart.tooltip.show({ data: {x: 2} }); chart.tooltip.show({ data: {x: 3, id: 'data1', value: 400} });
}, 3000); }, 3000);
setTimeout(function () { setTimeout(function () {
chart.tooltip.hide(); chart.tooltip.hide();
}, 4000); }, 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> </script>
</body> </body>
</html> </html>

36
src/api.tooltip.js
Unescape View File

@ -3,36 +3,32 @@ import { isValue } from './util';
c3_chart_fn.tooltip = function () {}; c3_chart_fn.tooltip = function () {};
c3_chart_fn.tooltip.show = function (args) { c3_chart_fn.tooltip.show = function (args) {
var $$ = this.internal, index, mouse; var $$ = this.internal, targets, data, mouse = {};
// determine mouse position on the chart // determine mouse position on the chart
if (args.mouse) { if (args.mouse) {
mouse = args.mouse; mouse = args.mouse;
} }
else {
// determine focus data // determine focus data
if (args.data) { if (args.data) {
if ($$.isMultipleX()) { data = args.data;
// 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 if (typeof args.x !== 'undefined') {
else if (typeof args.x !== 'undefined') { if (args.id) {
index = $$.getIndexByX(args.x); targets = $$.data.targets.filter(function(t){ return t.id === args.id; });
} } else {
else if (typeof args.index !== 'undefined') { targets = $$.data.targets;
index = args.index; }
data = $$.filterByX(targets, args.x).slice(0,1)[0];
}
mouse = data ? $$.getMousePosition(data) : null;
} }
// emulate mouse events to show // emulate mouse events to show
$$.dispatchEvent('mouseover', index, mouse); $$.dispatchEvent('mousemove', mouse);
$$.dispatchEvent('mousemove', index, mouse);
$$.config.tooltip_onshow.call($$, args.data); $$.config.tooltip_onshow.call($$, data);
}; };
c3_chart_fn.tooltip.hide = function () { c3_chart_fn.tooltip.hide = function () {
// TODO: get target data by checking the state of focus // TODO: get target data by checking the state of focus

5
src/data.js
Unescape View File

@ -23,11 +23,6 @@ c3_chart_internal_fn.getXValuesOfXKey = function (key, targets) {
}); });
return xValues; 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) { c3_chart_internal_fn.getXValue = function (id, i) {
var $$ = this; var $$ = this;
return id in $$.data.xs && $$.data.xs[id] && isValue($$.data.xs[id][i]) ? $$.data.xs[id][i] : i; return id in $$.data.xs && $$.data.xs[id] && isValue($$.data.xs[id][i]) ? $$.data.xs[id][i] : i;

4
src/interaction.js
Unescape View File

@ -133,6 +133,10 @@ c3_chart_internal_fn.redrawEventRect = function () {
) : 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) { c3_chart_internal_fn.dispatchEvent = function (type, mouse) {
var $$ = this, var $$ = this,
selector = '.' + CLASS.eventRect, selector = '.' + CLASS.eventRect,

Write Preview
Loading…
Cancel
Save