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

Fix legend focus/defocus - #558

pull/590/head
Masayuki Tanaka 10 years ago
parent
03fb330105
commit
6bd56b2b26
6 changed files with 50 additions and 48 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. 47
      c3.js
  2. 4
      c3.min.js
  3. 4
      src/api.focus.js
  4. 8
      src/api.show.js
  5. 32
      src/arc.js
  6. 3
      src/legend.js

47
c3.js
Unescape View File

@ -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 @@
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 @@
} }
}); });
}); });
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 @@
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 @@
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 @@
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 @@
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) {

4
c3.min.js vendored
View File

File diff suppressed because one or more lines are too long

4
src/api.focus.js
Unescape View File

@ -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) {
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()) {

8
src/api.show.js
Unescape View File

@ -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) {
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) {

32
src/arc.js
Unescape View File

@ -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) {
} }
}); });
}); });
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)

3
src/legend.js
Unescape View File

@ -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) {

Write Preview
Loading…
Cancel
Save