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 @@
$$.api.show(id);
} else {
$$.api.toggle(id);
$$.isTargetToShow(id) ? $$.api.focus(id) : $$.api.revert();
}
}
})
.on('mouseover', function (id) {
$$.d3.select(this).classed(CLASS.legendItemFocused, true);
if (!$$.transiting) {
if (!$$.transiting && $$.isTargetToShow(id)) {
$$.api.focus(id);
}
if (config.legend_item_onmouseover) {
......@@ -4286,17 +4287,23 @@
return format ? format(value, ratio) : $$.defaultArcValueFormat(value, ratio);
};
c3_chart_internal_fn.expandArc = function (targetIds, withoutFadeOut) {
var $$ = this, targets, noneTargets;
c3_chart_internal_fn.expandArc = function (targetIds) {
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)),
noneTargets = $$.svg.selectAll('.' + CLASS.arc).filter(function (data) {
return targetIds.indexOf(data.data.id) < 0;
});
targetIds = $$.mapToTargetIds(targetIds);
targets.each(function (d) {
$$.svg.selectAll($$.selectorTargets(targetIds, '.' + CLASS.chartArc)).each(function (d) {
if (! $$.shouldExpand(d.data.id)) { return; }
$$.d3.select(this).selectAll('path')
.transition().duration(50)
......@@ -4309,18 +4316,16 @@
}
});
});
if (!withoutFadeOut) {
noneTargets.style("opacity", 0.3);
}
};
c3_chart_internal_fn.unexpandArc = function (targetIds) {
var $$ = this, targets;
var $$ = this;
if ($$.transiting) { return; }
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)
.attr("d", $$.svgArc);
$$.svg.selectAll('.' + CLASS.arc)
......@@ -5369,7 +5374,7 @@
this.defocus();
candidates.classed(CLASS.focused, true).classed(CLASS.defocused, false);
if ($$.hasArcType()) {
$$.expandArc(targetIds, true);
$$.expandArc(targetIds);
}
$$.toggleFocusLegend(targetIds, true);
......@@ -5402,7 +5407,7 @@
var $$ = this.internal, candidates;
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);
if ($$.hasArcType()) {
......@@ -5426,9 +5431,7 @@
targets.transition()
.style('opacity', 1, 'important')
.call($$.endall, function () {
targets.style('opacity', null).style('opacity', 1)
.classed(CLASS.focused, false)
.classed(CLASS.defocused, false);
targets.style('opacity', null).style('opacity', 1);
});
if (options.withLegend) {
......@@ -5450,9 +5453,7 @@
targets.transition()
.style('opacity', 0, 'important')
.call($$.endall, function () {
targets.style('opacity', null).style('opacity', 0)
.classed(CLASS.focused, false)
.classed(CLASS.defocused, false);
targets.style('opacity', null).style('opacity', 0);
});
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) {
this.defocus();
candidates.classed(CLASS.focused, true).classed(CLASS.defocused, false);
if ($$.hasArcType()) {
$$.expandArc(targetIds, true);
$$.expandArc(targetIds);
}
$$.toggleFocusLegend(targetIds, true);
......@@ -41,7 +41,7 @@ c3_chart_fn.revert = function (targetIds) {
var $$ = this.internal, candidates;
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);
if ($$.hasArcType()) {
......
src/api.show.js
View file @ 6bd56b2b
......@@ -10,9 +10,7 @@ c3_chart_fn.show = function (targetIds, options) {
targets.transition()
.style('opacity', 1, 'important')
.call($$.endall, function () {
targets.style('opacity', null).style('opacity', 1)
.classed(CLASS.focused, false)
.classed(CLASS.defocused, false);
targets.style('opacity', null).style('opacity', 1);
});
if (options.withLegend) {
......@@ -34,9 +32,7 @@ c3_chart_fn.hide = function (targetIds, options) {
targets.transition()
.style('opacity', 0, 'important')
.call($$.endall, function () {
targets.style('opacity', null).style('opacity', 0)
.classed(CLASS.focused, false)
.classed(CLASS.defocused, false);
targets.style('opacity', null).style('opacity', 0);
});
if (options.withLegend) {
......
src/arc.js
View file @ 6bd56b2b
......@@ -118,17 +118,23 @@ c3_chart_internal_fn.textForArcLabel = function (d) {
return format ? format(value, ratio) : $$.defaultArcValueFormat(value, ratio);
};
c3_chart_internal_fn.expandArc = function (targetIds, withoutFadeOut) {
var $$ = this, targets, noneTargets;
c3_chart_internal_fn.expandArc = function (targetIds) {
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)),
noneTargets = $$.svg.selectAll('.' + CLASS.arc).filter(function (data) {
return targetIds.indexOf(data.data.id) < 0;
});
targetIds = $$.mapToTargetIds(targetIds);
targets.each(function (d) {
$$.svg.selectAll($$.selectorTargets(targetIds, '.' + CLASS.chartArc)).each(function (d) {
if (! $$.shouldExpand(d.data.id)) { return; }
$$.d3.select(this).selectAll('path')
.transition().duration(50)
......@@ -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) {
var $$ = this, targets;
var $$ = this;
if ($$.transiting) { return; }
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)
.attr("d", $$.svgArc);
$$.svg.selectAll('.' + CLASS.arc)
......
src/legend.js
View file @ 6bd56b2b
......@@ -207,12 +207,13 @@ c3_chart_internal_fn.updateLegend = function (targetIds, options, transitions) {
$$.api.show(id);
} else {
$$.api.toggle(id);
$$.isTargetToShow(id) ? $$.api.focus(id) : $$.api.revert();
}
}
})
.on('mouseover', function (id) {
$$.d3.select(this).classed(CLASS.legendItemFocused, true);
if (!$$.transiting) {
if (!$$.transiting && $$.isTargetToShow(id)) {
$$.api.focus(id);
}
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