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

Fix mouse event for multiple xs - #663

pull/681/merge
Masayuki Tanaka 10 years ago
parent
c76c89273b
commit
93703e62ef
5 changed files with 88 additions and 44 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. 62
      c3.js
  2. 8
      c3.min.js
  3. 17
      src/data.js
  4. 36
      src/interaction.js
  5. 9
      src/shape.bar.js

62
c3.js
Unescape View File

@ -1736,14 +1736,25 @@
return $$.findClosest(candidates, pos); return $$.findClosest(candidates, pos);
}; };
c3_chart_internal_fn.findClosest = function (values, pos) { c3_chart_internal_fn.findClosest = function (values, pos) {
var $$ = this, minDist, closest; var $$ = this, minDist = 100, closest;
values.forEach(function (v) {
// find mouseovering bar
values.filter(function (v) { return v && $$.isBarType(v.id); }).forEach(function (v) {
var shape = $$.d3.select('.' + CLASS.bars + $$.getTargetSelectorSuffix(v.id) + ' .' + CLASS.bar + '-' + v.index).node();
if ($$.isWithinBar(shape)) {
closest = v;
}
});
// find closest point from non-bar
values.filter(function (v) { return v && !$$.isBarType(v.id); }).forEach(function (v) {
var d = $$.dist(v, pos); var d = $$.dist(v, pos);
if (d < minDist || ! minDist) { if (d < minDist) {
minDist = d; minDist = d;
closest = v; closest = v;
} }
}); });
return closest; return closest;
}; };
c3_chart_internal_fn.dist = function (data, pos) { c3_chart_internal_fn.dist = function (data, pos) {
@ -2306,6 +2317,15 @@
c3_chart_internal_fn.generateEventRectsForMultipleXs = function (eventRectEnter) { c3_chart_internal_fn.generateEventRectsForMultipleXs = function (eventRectEnter) {
var $$ = this, d3 = $$.d3, config = $$.config; var $$ = this, d3 = $$.d3, config = $$.config;
function mouseout() {
$$.svg.select('.' + CLASS.eventRect).style('cursor', null);
$$.hideXGridFocus();
$$.hideTooltip();
$$.unexpandCircles();
$$.unexpandBars();
}
eventRectEnter.append('rect') eventRectEnter.append('rect')
.attr('x', 0) .attr('x', 0)
.attr('y', 0) .attr('y', 0)
@ -2314,9 +2334,7 @@
.attr('class', CLASS.eventRect) .attr('class', CLASS.eventRect)
.on('mouseout', function () { .on('mouseout', function () {
if ($$.hasArcType()) { return; } if ($$.hasArcType()) { return; }
$$.hideXGridFocus(); mouseout();
$$.hideTooltip();
$$.unexpandCircles();
}) })
.on('mousemove', function () { .on('mousemove', function () {
var targetsToShow = $$.filterTargetsToShow($$.data.targets); var targetsToShow = $$.filterTargetsToShow($$.data.targets);
@ -2328,7 +2346,15 @@
mouse = d3.mouse(this); mouse = d3.mouse(this);
closest = $$.findClosestFromTargets(targetsToShow, mouse); closest = $$.findClosestFromTargets(targetsToShow, mouse);
if (! closest) { return; } if ($$.mouseover && (!closest || closest.id !== $$.mouseover.id)) {
config.data_onmouseout.call($$, $$.mouseover);
$$.mouseover = undefined;
}
if (! closest) {
mouseout();
return;
}
if ($$.isScatterType(closest) || !config.tooltip_grouped) { if ($$.isScatterType(closest) || !config.tooltip_grouped) {
sameXData = [closest]; sameXData = [closest];
@ -2346,21 +2372,18 @@
if (config.point_focus_expand_enabled) { if (config.point_focus_expand_enabled) {
$$.expandCircles(closest.index, closest.id, true); $$.expandCircles(closest.index, closest.id, true);
} }
$$.expandBars(closest.index, closest.id, true);
// Show xgrid focus line // Show xgrid focus line
$$.showXGridFocus(selectedData); $$.showXGridFocus(selectedData);
// Show cursor as pointer if point is close to mouse position // Show cursor as pointer if point is close to mouse position
if ($$.dist(closest, mouse) < 100) { if ($$.isBarType(closest.id) || $$.dist(closest, mouse) < 100) {
$$.svg.select('.' + CLASS.eventRect).style('cursor', 'pointer'); $$.svg.select('.' + CLASS.eventRect).style('cursor', 'pointer');
if (!$$.mouseover) { if (!$$.mouseover) {
config.data_onmouseover.call($$, closest); config.data_onmouseover.call($$, closest);
$$.mouseover = true; $$.mouseover = closest;
} }
} else if ($$.mouseover) {
$$.svg.select('.' + CLASS.eventRect).style('cursor', null);
config.data_onmouseout.call($$, closest);
$$.mouseover = false;
} }
}) })
.on('click', function () { .on('click', function () {
@ -2375,8 +2398,8 @@
if (! closest) { return; } if (! closest) { return; }
// select if selection enabled // select if selection enabled
if ($$.dist(closest, mouse) < 100 && $$.toggleShape) { if ($$.isBarType(closest.id) || $$.dist(closest, mouse) < 100) {
$$.main.select('.' + CLASS.circles + $$.getTargetSelectorSuffix(closest.id)).select('.' + CLASS.circle + '-' + closest.index).each(function () { $$.main.selectAll('.' + CLASS.shapes + $$.getTargetSelectorSuffix(closest.id)).select('.' + CLASS.shape + '-' + closest.index).each(function () {
if (config.data_selection_grouped || $$.isWithinShape(this, closest)) { if (config.data_selection_grouped || $$.isWithinShape(this, closest)) {
$$.toggleShape(this, closest, closest.index); $$.toggleShape(this, closest, closest.index);
$$.config.data_onclick.call($$.api, closest, this); $$.config.data_onclick.call($$.api, closest, this);
@ -2996,14 +3019,14 @@
w = typeof config.bar_width === 'number' ? config.bar_width : barTargetsNum ? (axis.tickOffset() * 2 * config.bar_width_ratio) / barTargetsNum : 0; w = typeof config.bar_width === 'number' ? config.bar_width : barTargetsNum ? (axis.tickOffset() * 2 * config.bar_width_ratio) / barTargetsNum : 0;
return config.bar_width_max && w > config.bar_width_max ? config.bar_width_max : w; return config.bar_width_max && w > config.bar_width_max ? config.bar_width_max : w;
}; };
c3_chart_internal_fn.getBars = function (i) { c3_chart_internal_fn.getBars = function (i, id) {
var $$ = this; var $$ = this;
return $$.main.selectAll('.' + CLASS.bar + (isValue(i) ? '-' + i : '')); return (id ? $$.main.selectAll('.' + CLASS.bars + $$.getTargetSelectorSuffix(id)) : $$.main).selectAll('.' + CLASS.bar + (isValue(i) ? '-' + i : ''));
}; };
c3_chart_internal_fn.expandBars = function (i, id, reset) { c3_chart_internal_fn.expandBars = function (i, id, reset) {
var $$ = this; var $$ = this;
if (reset) { $$.unexpandBars(); } if (reset) { $$.unexpandBars(); }
$$.getBars(i).classed(CLASS.EXPANDED, true); $$.getBars(i, id).classed(CLASS.EXPANDED, true);
}; };
c3_chart_internal_fn.unexpandBars = function (i) { c3_chart_internal_fn.unexpandBars = function (i) {
var $$ = this; var $$ = this;
@ -3056,8 +3079,7 @@
}; };
}; };
c3_chart_internal_fn.isWithinBar = function (that) { c3_chart_internal_fn.isWithinBar = function (that) {
var d3 = this.d3, var mouse = this.d3.mouse(that), box = that.getBoundingClientRect(),
mouse = d3.mouse(that), box = that.getBoundingClientRect(),
seg0 = that.pathSegList.getItem(0), seg1 = that.pathSegList.getItem(1), seg0 = that.pathSegList.getItem(0), seg1 = that.pathSegList.getItem(1),
x = Math.min(seg0.x, seg1.x), y = Math.min(seg0.y, seg1.y), x = Math.min(seg0.x, seg1.x), y = Math.min(seg0.y, seg1.y),
w = box.width, h = box.height, offset = 2, w = box.width, h = box.height, offset = 2,

8
c3.min.js vendored
View File

File diff suppressed because one or more lines are too long

17
src/data.js
Unescape View File

@ -296,14 +296,25 @@ c3_chart_internal_fn.findClosestFromTargets = function (targets, pos) {
return $$.findClosest(candidates, pos); return $$.findClosest(candidates, pos);
}; };
c3_chart_internal_fn.findClosest = function (values, pos) { c3_chart_internal_fn.findClosest = function (values, pos) {
var $$ = this, minDist, closest; var $$ = this, minDist = 100, closest;
values.forEach(function (v) {
// find mouseovering bar
values.filter(function (v) { return v && $$.isBarType(v.id); }).forEach(function (v) {
var shape = $$.d3.select('.' + CLASS.bars + $$.getTargetSelectorSuffix(v.id) + ' .' + CLASS.bar + '-' + v.index).node();
if ($$.isWithinBar(shape)) {
closest = v;
}
});
// find closest point from non-bar
values.filter(function (v) { return v && !$$.isBarType(v.id); }).forEach(function (v) {
var d = $$.dist(v, pos); var d = $$.dist(v, pos);
if (d < minDist || ! minDist) { if (d < minDist) {
minDist = d; minDist = d;
closest = v; closest = v;
} }
}); });
return closest; return closest;
}; };
c3_chart_internal_fn.dist = function (data, pos) { c3_chart_internal_fn.dist = function (data, pos) {

36
src/interaction.js
Unescape View File

@ -236,6 +236,15 @@ c3_chart_internal_fn.generateEventRectsForSingleX = function (eventRectEnter) {
c3_chart_internal_fn.generateEventRectsForMultipleXs = function (eventRectEnter) { c3_chart_internal_fn.generateEventRectsForMultipleXs = function (eventRectEnter) {
var $$ = this, d3 = $$.d3, config = $$.config; var $$ = this, d3 = $$.d3, config = $$.config;
function mouseout() {
$$.svg.select('.' + CLASS.eventRect).style('cursor', null);
$$.hideXGridFocus();
$$.hideTooltip();
$$.unexpandCircles();
$$.unexpandBars();
}
eventRectEnter.append('rect') eventRectEnter.append('rect')
.attr('x', 0) .attr('x', 0)
.attr('y', 0) .attr('y', 0)
@ -244,9 +253,7 @@ c3_chart_internal_fn.generateEventRectsForMultipleXs = function (eventRectEnter)
.attr('class', CLASS.eventRect) .attr('class', CLASS.eventRect)
.on('mouseout', function () { .on('mouseout', function () {
if ($$.hasArcType()) { return; } if ($$.hasArcType()) { return; }
$$.hideXGridFocus(); mouseout();
$$.hideTooltip();
$$.unexpandCircles();
}) })
.on('mousemove', function () { .on('mousemove', function () {
var targetsToShow = $$.filterTargetsToShow($$.data.targets); var targetsToShow = $$.filterTargetsToShow($$.data.targets);
@ -258,7 +265,15 @@ c3_chart_internal_fn.generateEventRectsForMultipleXs = function (eventRectEnter)
mouse = d3.mouse(this); mouse = d3.mouse(this);
closest = $$.findClosestFromTargets(targetsToShow, mouse); closest = $$.findClosestFromTargets(targetsToShow, mouse);
if (! closest) { return; } if ($$.mouseover && (!closest || closest.id !== $$.mouseover.id)) {
config.data_onmouseout.call($$, $$.mouseover);
$$.mouseover = undefined;
}
if (! closest) {
mouseout();
return;
}
if ($$.isScatterType(closest) || !config.tooltip_grouped) { if ($$.isScatterType(closest) || !config.tooltip_grouped) {
sameXData = [closest]; sameXData = [closest];
@ -276,21 +291,18 @@ c3_chart_internal_fn.generateEventRectsForMultipleXs = function (eventRectEnter)
if (config.point_focus_expand_enabled) { if (config.point_focus_expand_enabled) {
$$.expandCircles(closest.index, closest.id, true); $$.expandCircles(closest.index, closest.id, true);
} }
$$.expandBars(closest.index, closest.id, true);
// Show xgrid focus line // Show xgrid focus line
$$.showXGridFocus(selectedData); $$.showXGridFocus(selectedData);
// Show cursor as pointer if point is close to mouse position // Show cursor as pointer if point is close to mouse position
if ($$.dist(closest, mouse) < 100) { if ($$.isBarType(closest.id) || $$.dist(closest, mouse) < 100) {
$$.svg.select('.' + CLASS.eventRect).style('cursor', 'pointer'); $$.svg.select('.' + CLASS.eventRect).style('cursor', 'pointer');
if (!$$.mouseover) { if (!$$.mouseover) {
config.data_onmouseover.call($$, closest); config.data_onmouseover.call($$, closest);
$$.mouseover = true; $$.mouseover = closest;
} }
} else if ($$.mouseover) {
$$.svg.select('.' + CLASS.eventRect).style('cursor', null);
config.data_onmouseout.call($$, closest);
$$.mouseover = false;
} }
}) })
.on('click', function () { .on('click', function () {
@ -305,8 +317,8 @@ c3_chart_internal_fn.generateEventRectsForMultipleXs = function (eventRectEnter)
if (! closest) { return; } if (! closest) { return; }
// select if selection enabled // select if selection enabled
if ($$.dist(closest, mouse) < 100 && $$.toggleShape) { if ($$.isBarType(closest.id) || $$.dist(closest, mouse) < 100) {
$$.main.select('.' + CLASS.circles + $$.getTargetSelectorSuffix(closest.id)).select('.' + CLASS.circle + '-' + closest.index).each(function () { $$.main.selectAll('.' + CLASS.shapes + $$.getTargetSelectorSuffix(closest.id)).select('.' + CLASS.shape + '-' + closest.index).each(function () {
if (config.data_selection_grouped || $$.isWithinShape(this, closest)) { if (config.data_selection_grouped || $$.isWithinShape(this, closest)) {
$$.toggleShape(this, closest, closest.index); $$.toggleShape(this, closest, closest.index);
$$.config.data_onclick.call($$.api, closest, this); $$.config.data_onclick.call($$.api, closest, this);

9
src/shape.bar.js
Unescape View File

@ -52,14 +52,14 @@ c3_chart_internal_fn.getBarW = function (axis, barTargetsNum) {
w = typeof config.bar_width === 'number' ? config.bar_width : barTargetsNum ? (axis.tickOffset() * 2 * config.bar_width_ratio) / barTargetsNum : 0; w = typeof config.bar_width === 'number' ? config.bar_width : barTargetsNum ? (axis.tickOffset() * 2 * config.bar_width_ratio) / barTargetsNum : 0;
return config.bar_width_max && w > config.bar_width_max ? config.bar_width_max : w; return config.bar_width_max && w > config.bar_width_max ? config.bar_width_max : w;
}; };
c3_chart_internal_fn.getBars = function (i) { c3_chart_internal_fn.getBars = function (i, id) {
var $$ = this; var $$ = this;
return $$.main.selectAll('.' + CLASS.bar + (isValue(i) ? '-' + i : '')); return (id ? $$.main.selectAll('.' + CLASS.bars + $$.getTargetSelectorSuffix(id)) : $$.main).selectAll('.' + CLASS.bar + (isValue(i) ? '-' + i : ''));
}; };
c3_chart_internal_fn.expandBars = function (i, id, reset) { c3_chart_internal_fn.expandBars = function (i, id, reset) {
var $$ = this; var $$ = this;
if (reset) { $$.unexpandBars(); } if (reset) { $$.unexpandBars(); }
$$.getBars(i).classed(CLASS.EXPANDED, true); $$.getBars(i, id).classed(CLASS.EXPANDED, true);
}; };
c3_chart_internal_fn.unexpandBars = function (i) { c3_chart_internal_fn.unexpandBars = function (i) {
var $$ = this; var $$ = this;
@ -112,8 +112,7 @@ c3_chart_internal_fn.generateGetBarPoints = function (barIndices, isSub) {
}; };
}; };
c3_chart_internal_fn.isWithinBar = function (that) { c3_chart_internal_fn.isWithinBar = function (that) {
var d3 = this.d3, var mouse = this.d3.mouse(that), box = that.getBoundingClientRect(),
mouse = d3.mouse(that), box = that.getBoundingClientRect(),
seg0 = that.pathSegList.getItem(0), seg1 = that.pathSegList.getItem(1), seg0 = that.pathSegList.getItem(0), seg1 = that.pathSegList.getItem(1),
x = Math.min(seg0.x, seg1.x), y = Math.min(seg0.y, seg1.y), x = Math.min(seg0.x, seg1.x), y = Math.min(seg0.y, seg1.y),
w = box.width, h = box.height, offset = 2, w = box.width, h = box.height, offset = 2,

Write Preview
Loading…
Cancel
Save