Skip to content

C
c3-closed
Commit 6bd56b2b authored by Masayuki Tanaka's avatar Masayuki Tanaka
Browse files
Options

Fix legend focus/defocus - #558

parent 03fb3301
Hide whitespace changes
Inline Side-by-side
Showing with 48 additions and 46 deletions
c3.js
View file @ 6bd56b2b
...@@ -3670,12 +3670,13 @@ ...@@ -3670,12 +3670,13 @@
$$.api.show(id); $$.api.show(id);
} else { } else {
$$.api.toggle(id); $$.api.toggle(id);
$$.isTargetToShow(id) ? $$.api.focus(id) : $$.api.revert();
} }
} }
}) })
.on('mouseover', function (id) { .on('mouseover', function (id) {
$$.d3.select(this).classed(CLASS.legendItemFocused, true); $$.d3.select(this).classed(CLASS.legendItemFocused, true);
if (!$$.transiting) { if (!$$.transiting && $$.isTargetToShow(id)) {
$$.api.focus(id); $$.api.focus(id);
} }
if (config.legend_item_onmouseover) { if (config.legend_item_onmouseover) {
...@@ -4286,17 +4287,23 @@ ...@@ -4286,17 +4287,23 @@
return format ? format(value, ratio) : $$.defaultArcValueFormat(value, ratio); return format ? format(value, ratio) : $$.defaultArcValueFormat(value, ratio);
}; };
c3_chart_internal_fn.expandArc = function (targetIds, withoutFadeOut) { c3_chart_internal_fn.expandArc = function (targetIds) {
var $$ = this, targets, noneTargets; var $$ = this, interval;
targetIds = $$.mapToTargetIds(targetIds); // MEMO: avoid to cancel transition
if ($$.transiting) {
interval = window.setInterval(function () {
if (!$$.transiting) {
window.clearInterval(interval);
$$.expandArc(targetIds);
}
}, 10);
return;
}
targets = $$.svg.selectAll($$.selectorTargets(targetIds, '.' + CLASS.chartArc)), targetIds = $$.mapToTargetIds(targetIds);
noneTargets = $$.svg.selectAll('.' + CLASS.arc).filter(function (data) {
return targetIds.indexOf(data.data.id) < 0;
});
targets.each(function (d) { $$.svg.selectAll($$.selectorTargets(targetIds, '.' + CLASS.chartArc)).each(function (d) {
if (! $$.shouldExpand(d.data.id)) { return; } if (! $$.shouldExpand(d.data.id)) { return; }
$$.d3.select(this).selectAll('path') $$.d3.select(this).selectAll('path')
.transition().duration(50) .transition().duration(50)
...@@ -4309,18 +4316,16 @@ ...@@ -4309,18 +4316,16 @@
} }
}); });
}); });
if (!withoutFadeOut) {
noneTargets.style("opacity", 0.3);
}
}; };
c3_chart_internal_fn.unexpandArc = function (targetIds) { c3_chart_internal_fn.unexpandArc = function (targetIds) {
var $$ = this, targets; var $$ = this;
if ($$.transiting) { return; }
targetIds = $$.mapToTargetIds(targetIds); targetIds = $$.mapToTargetIds(targetIds);
targets = $$.svg.selectAll($$.selectorTargets(targetIds, '.' + CLASS.chartArc));
targets.selectAll('path.' + CLASS.arc) $$.svg.selectAll($$.selectorTargets(targetIds, '.' + CLASS.chartArc)).selectAll('path')
.transition().duration(50) .transition().duration(50)
.attr("d", $$.svgArc); .attr("d", $$.svgArc);
$$.svg.selectAll('.' + CLASS.arc) $$.svg.selectAll('.' + CLASS.arc)
...@@ -5369,7 +5374,7 @@ ...@@ -5369,7 +5374,7 @@
this.defocus(); this.defocus();
candidates.classed(CLASS.focused, true).classed(CLASS.defocused, false); candidates.classed(CLASS.focused, true).classed(CLASS.defocused, false);
if ($$.hasArcType()) { if ($$.hasArcType()) {
$$.expandArc(targetIds, true); $$.expandArc(targetIds);
} }
$$.toggleFocusLegend(targetIds, true); $$.toggleFocusLegend(targetIds, true);
...@@ -5402,7 +5407,7 @@ ...@@ -5402,7 +5407,7 @@
var $$ = this.internal, candidates; var $$ = this.internal, candidates;
targetIds = $$.mapToTargetIds(targetIds); targetIds = $$.mapToTargetIds(targetIds);
candidates = $$.svg.selectAll($$.selectorTargets(targetIds.filter($$.isTargetToShow, $$))); candidates = $$.svg.selectAll($$.selectorTargets(targetIds)); // should be for all targets
candidates.classed(CLASS.focused, false).classed(CLASS.defocused, false); candidates.classed(CLASS.focused, false).classed(CLASS.defocused, false);
if ($$.hasArcType()) { if ($$.hasArcType()) {
...@@ -5426,9 +5431,7 @@ ...@@ -5426,9 +5431,7 @@
targets.transition() targets.transition()
.style('opacity', 1, 'important') .style('opacity', 1, 'important')
.call($$.endall, function () { .call($$.endall, function () {
targets.style('opacity', null).style('opacity', 1) targets.style('opacity', null).style('opacity', 1);
.classed(CLASS.focused, false)
.classed(CLASS.defocused, false);
}); });
if (options.withLegend) { if (options.withLegend) {
...@@ -5450,9 +5453,7 @@ ...@@ -5450,9 +5453,7 @@
targets.transition() targets.transition()
.style('opacity', 0, 'important') .style('opacity', 0, 'important')
.call($$.endall, function () { .call($$.endall, function () {
targets.style('opacity', null).style('opacity', 0) targets.style('opacity', null).style('opacity', 0);
.classed(CLASS.focused, false)
.classed(CLASS.defocused, false);
}); });
if (options.withLegend) { if (options.withLegend) {
......
c3.min.js
View file @ 6bd56b2b
This source diff could not be displayed because it is too large. You can view the blob instead.
src/api.focus.js
View file @ 6bd56b2b
...@@ -8,7 +8,7 @@ c3_chart_fn.focus = function (targetIds) { ...@@ -8,7 +8,7 @@ c3_chart_fn.focus = function (targetIds) {
this.defocus(); this.defocus();
candidates.classed(CLASS.focused, true).classed(CLASS.defocused, false); candidates.classed(CLASS.focused, true).classed(CLASS.defocused, false);
if ($$.hasArcType()) { if ($$.hasArcType()) {
$$.expandArc(targetIds, true); $$.expandArc(targetIds);
} }
$$.toggleFocusLegend(targetIds, true); $$.toggleFocusLegend(targetIds, true);
...@@ -41,7 +41,7 @@ c3_chart_fn.revert = function (targetIds) { ...@@ -41,7 +41,7 @@ c3_chart_fn.revert = function (targetIds) {
var $$ = this.internal, candidates; var $$ = this.internal, candidates;
targetIds = $$.mapToTargetIds(targetIds); targetIds = $$.mapToTargetIds(targetIds);
candidates = $$.svg.selectAll($$.selectorTargets(targetIds.filter($$.isTargetToShow, $$))); candidates = $$.svg.selectAll($$.selectorTargets(targetIds)); // should be for all targets
candidates.classed(CLASS.focused, false).classed(CLASS.defocused, false); candidates.classed(CLASS.focused, false).classed(CLASS.defocused, false);
if ($$.hasArcType()) { if ($$.hasArcType()) {
......
src/api.show.js
View file @ 6bd56b2b
...@@ -10,9 +10,7 @@ c3_chart_fn.show = function (targetIds, options) { ...@@ -10,9 +10,7 @@ c3_chart_fn.show = function (targetIds, options) {
targets.transition() targets.transition()
.style('opacity', 1, 'important') .style('opacity', 1, 'important')
.call($$.endall, function () { .call($$.endall, function () {
targets.style('opacity', null).style('opacity', 1) targets.style('opacity', null).style('opacity', 1);
.classed(CLASS.focused, false)
.classed(CLASS.defocused, false);
}); });
if (options.withLegend) { if (options.withLegend) {
...@@ -34,9 +32,7 @@ c3_chart_fn.hide = function (targetIds, options) { ...@@ -34,9 +32,7 @@ c3_chart_fn.hide = function (targetIds, options) {
targets.transition() targets.transition()
.style('opacity', 0, 'important') .style('opacity', 0, 'important')
.call($$.endall, function () { .call($$.endall, function () {
targets.style('opacity', null).style('opacity', 0) targets.style('opacity', null).style('opacity', 0);
.classed(CLASS.focused, false)
.classed(CLASS.defocused, false);
}); });
if (options.withLegend) { if (options.withLegend) {
......
src/arc.js
View file @ 6bd56b2b
...@@ -118,17 +118,23 @@ c3_chart_internal_fn.textForArcLabel = function (d) { ...@@ -118,17 +118,23 @@ c3_chart_internal_fn.textForArcLabel = function (d) {
return format ? format(value, ratio) : $$.defaultArcValueFormat(value, ratio); return format ? format(value, ratio) : $$.defaultArcValueFormat(value, ratio);
}; };
c3_chart_internal_fn.expandArc = function (targetIds, withoutFadeOut) { c3_chart_internal_fn.expandArc = function (targetIds) {
var $$ = this, targets, noneTargets; var $$ = this, interval;
targetIds = $$.mapToTargetIds(targetIds); // MEMO: avoid to cancel transition
if ($$.transiting) {
interval = window.setInterval(function () {
if (!$$.transiting) {
window.clearInterval(interval);
$$.expandArc(targetIds);
}
}, 10);
return;
}
targets = $$.svg.selectAll($$.selectorTargets(targetIds, '.' + CLASS.chartArc)), targetIds = $$.mapToTargetIds(targetIds);
noneTargets = $$.svg.selectAll('.' + CLASS.arc).filter(function (data) {
return targetIds.indexOf(data.data.id) < 0;
});
targets.each(function (d) { $$.svg.selectAll($$.selectorTargets(targetIds, '.' + CLASS.chartArc)).each(function (d) {
if (! $$.shouldExpand(d.data.id)) { return; } if (! $$.shouldExpand(d.data.id)) { return; }
$$.d3.select(this).selectAll('path') $$.d3.select(this).selectAll('path')
.transition().duration(50) .transition().duration(50)
...@@ -141,18 +147,16 @@ c3_chart_internal_fn.expandArc = function (targetIds, withoutFadeOut) { ...@@ -141,18 +147,16 @@ c3_chart_internal_fn.expandArc = function (targetIds, withoutFadeOut) {
} }
}); });
}); });
if (!withoutFadeOut) {
noneTargets.style("opacity", 0.3);
}
}; };
c3_chart_internal_fn.unexpandArc = function (targetIds) { c3_chart_internal_fn.unexpandArc = function (targetIds) {
var $$ = this, targets; var $$ = this;
if ($$.transiting) { return; }
targetIds = $$.mapToTargetIds(targetIds); targetIds = $$.mapToTargetIds(targetIds);
targets = $$.svg.selectAll($$.selectorTargets(targetIds, '.' + CLASS.chartArc));
targets.selectAll('path.' + CLASS.arc) $$.svg.selectAll($$.selectorTargets(targetIds, '.' + CLASS.chartArc)).selectAll('path')
.transition().duration(50) .transition().duration(50)
.attr("d", $$.svgArc); .attr("d", $$.svgArc);
$$.svg.selectAll('.' + CLASS.arc) $$.svg.selectAll('.' + CLASS.arc)
......
src/legend.js
View file @ 6bd56b2b
...@@ -207,12 +207,13 @@ c3_chart_internal_fn.updateLegend = function (targetIds, options, transitions) { ...@@ -207,12 +207,13 @@ c3_chart_internal_fn.updateLegend = function (targetIds, options, transitions) {
$$.api.show(id); $$.api.show(id);
} else { } else {
$$.api.toggle(id); $$.api.toggle(id);
$$.isTargetToShow(id) ? $$.api.focus(id) : $$.api.revert();
} }
} }
}) })
.on('mouseover', function (id) { .on('mouseover', function (id) {
$$.d3.select(this).classed(CLASS.legendItemFocused, true); $$.d3.select(this).classed(CLASS.legendItemFocused, true);
if (!$$.transiting) { if (!$$.transiting && $$.isTargetToShow(id)) {
$$.api.focus(id); $$.api.focus(id);
} }
if (config.legend_item_onmouseover) { if (config.legend_item_onmouseover) {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment