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

Change focus/defocus logic to use css class - #530

pull/568/head
Masayuki Tanaka 10 years ago
parent
84a469e2e2
commit
f1f62db126
11 changed files with 205 additions and 137 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. 7
      c3.css
  2. 165
      c3.js
  3. 8
      c3.min.js
  4. 74
      src/api.focus.js
  5. 36
      src/arc.js
  6. 19
      src/class.js
  7. 5
      src/core.js
  8. 13
      src/legend.js
  9. 5
      src/shape.bar.js
  10. 5
      src/shape.line.js
  11. 5
      src/text.js

7
c3.css
Unescape View File

@ -104,9 +104,16 @@
/*-- Focus --*/ /*-- Focus --*/
.c3-target.c3-focused {
opacity: 1;
}
.c3-target.c3-focused path.c3-line, .c3-target.c3-focused path.c3-step { .c3-target.c3-focused path.c3-line, .c3-target.c3-focused path.c3-step {
stroke-width: 2px; stroke-width: 2px;
} }
.c3-target.c3-defocused {
opacity: 0.3 !important;
}
/*-- Region --*/ /*-- Region --*/

165
c3.js
Unescape View File

@ -105,6 +105,8 @@
$$.hiddenTargetIds = []; $$.hiddenTargetIds = [];
$$.hiddenLegendIds = []; $$.hiddenLegendIds = [];
$$.focusedTargetIds = [];
$$.defocusedTargetIds = [];
$$.xOrient = config.axis_rotated ? "left" : "bottom"; $$.xOrient = config.axis_rotated ? "left" : "bottom";
$$.yOrient = config.axis_rotated ? "bottom" : "left"; $$.yOrient = config.axis_rotated ? "bottom" : "left";
@ -675,8 +677,7 @@
return d.value !== null && this.withoutFadeIn[d.id] ? 1 : 0; return d.value !== null && this.withoutFadeIn[d.id] ? 1 : 0;
}; };
c3_chart_internal_fn.opacityForCircle = function (d) { c3_chart_internal_fn.opacityForCircle = function (d) {
var $$ = this; return isValue(d.value) ? this.isScatterType(d) ? 0.5 : 1 : 0;
return isValue(d.value) ? $$.isScatterType(d) ? 0.5 : 1 : 0;
}; };
c3_chart_internal_fn.opacityForText = function () { c3_chart_internal_fn.opacityForText = function () {
return this.hasDataLabel() ? 1 : 0; return this.hasDataLabel() ? 1 : 0;
@ -2486,10 +2487,11 @@
classChartLine = $$.classChartLine.bind($$), classChartLine = $$.classChartLine.bind($$),
classLines = $$.classLines.bind($$), classLines = $$.classLines.bind($$),
classAreas = $$.classAreas.bind($$), classAreas = $$.classAreas.bind($$),
classCircles = $$.classCircles.bind($$); classCircles = $$.classCircles.bind($$),
classFocus = $$.classFocus.bind($$);
mainLineUpdate = $$.main.select('.' + CLASS.chartLines).selectAll('.' + CLASS.chartLine) mainLineUpdate = $$.main.select('.' + CLASS.chartLines).selectAll('.' + CLASS.chartLine)
.data(targets) .data(targets)
.attr('class', classChartLine); .attr('class', function (d) { return classChartLine(d) + classFocus(d); });
mainLineEnter = mainLineUpdate.enter().append('g') mainLineEnter = mainLineUpdate.enter().append('g')
.attr('class', classChartLine) .attr('class', classChartLine)
.style('opacity', 0) .style('opacity', 0)
@ -2831,10 +2833,11 @@
var $$ = this, config = $$.config, var $$ = this, config = $$.config,
mainBarUpdate, mainBarEnter, mainBarUpdate, mainBarEnter,
classChartBar = $$.classChartBar.bind($$), classChartBar = $$.classChartBar.bind($$),
classBars = $$.classBars.bind($$); classBars = $$.classBars.bind($$),
classFocus = $$.classFocus.bind($$);
mainBarUpdate = $$.main.select('.' + CLASS.chartBars).selectAll('.' + CLASS.chartBar) mainBarUpdate = $$.main.select('.' + CLASS.chartBars).selectAll('.' + CLASS.chartBar)
.data(targets) .data(targets)
.attr('class', classChartBar); .attr('class', function (d) { return classChartBar(d) + classFocus(d); });
mainBarEnter = mainBarUpdate.enter().append('g') mainBarEnter = mainBarUpdate.enter().append('g')
.attr('class', classChartBar) .attr('class', classChartBar)
.style('opacity', 0) .style('opacity', 0)
@ -2952,10 +2955,11 @@
c3_chart_internal_fn.updateTargetsForText = function (targets) { c3_chart_internal_fn.updateTargetsForText = function (targets) {
var $$ = this, mainTextUpdate, mainTextEnter, var $$ = this, mainTextUpdate, mainTextEnter,
classChartText = $$.classChartText.bind($$), classChartText = $$.classChartText.bind($$),
classTexts = $$.classTexts.bind($$); classTexts = $$.classTexts.bind($$),
classFocus = $$.classFocus.bind($$);
mainTextUpdate = $$.main.select('.' + CLASS.chartTexts).selectAll('.' + CLASS.chartText) mainTextUpdate = $$.main.select('.' + CLASS.chartTexts).selectAll('.' + CLASS.chartText)
.data(targets) .data(targets)
.attr('class', classChartText); .attr('class', function (d) { return classChartText(d) + classFocus(d); });
mainTextEnter = mainTextUpdate.enter().append('g') mainTextEnter = mainTextUpdate.enter().append('g')
.attr('class', classChartText) .attr('class', classChartText)
.style('opacity', 0) .style('opacity', 0)
@ -3505,17 +3509,17 @@
var $$ = this; var $$ = this;
return legendItem.classed(CLASS.legendItemHidden) ? $$.legendOpacityForHidden : 0.3; return legendItem.classed(CLASS.legendItemHidden) ? $$.legendOpacityForHidden : 0.3;
}; };
c3_chart_internal_fn.toggleFocusLegend = function (id, focus) { c3_chart_internal_fn.toggleFocusLegend = function (targetIds, focus) {
var $$ = this; var $$ = this;
targetIds = $$.mapToTargetIds(targetIds);
$$.legend.selectAll('.' + CLASS.legendItem) $$.legend.selectAll('.' + CLASS.legendItem)
.classed(CLASS.legendItemFocused, function (id) {
return targetIds.indexOf(id) >= 0 && focus;
})
.transition().duration(100) .transition().duration(100)
.style('opacity', function (_id) { .style('opacity', function (id) {
var This = $$.d3.select(this); var opacity = targetIds.indexOf(id) >= 0 && focus ? $$.opacityForLegend : $$.opacityForUnfocusedLegend;
if (id && _id !== id) { return opacity.call($$, $$.d3.select(this));
return focus ? $$.opacityForUnfocusedLegend(This) : $$.opacityForLegend(This);
} else {
return focus ? $$.opacityForLegend(This) : $$.opacityForUnfocusedLegend(This);
}
}); });
}; };
c3_chart_internal_fn.revertLegend = function () { c3_chart_internal_fn.revertLegend = function () {
@ -4256,13 +4260,19 @@
return format ? format(value, ratio) : $$.defaultArcValueFormat(value, ratio); return format ? format(value, ratio) : $$.defaultArcValueFormat(value, ratio);
}; };
c3_chart_internal_fn.expandArc = function (id, withoutFadeOut) { c3_chart_internal_fn.expandArc = function (targetIds, withoutFadeOut) {
var $$ = this, var $$ = this, targets, noneTargets;
target = $$.svg.selectAll('.' + CLASS.chartArc + $$.selectorTarget(id)),
noneTargets = $$.svg.selectAll('.' + CLASS.arc).filter(function (data) { return data.data.id !== id; }); targetIds = $$.mapToTargetIds(targetIds);
if ($$.shouldExpand(id)) { targets = $$.svg.selectAll($$.selectorTargets(targetIds, '.' + CLASS.chartArc)),
target.selectAll('path') noneTargets = $$.svg.selectAll('.' + CLASS.arc).filter(function (data) {
return targetIds.indexOf(data.data.id) < 0;
});
targets.each(function (d) {
if (! $$.shouldExpand(d.data.id)) { return; }
$$.d3.select(this).selectAll('path')
.transition().duration(50) .transition().duration(50)
.attr("d", $$.svgArcExpanded) .attr("d", $$.svgArcExpanded)
.transition().duration(100) .transition().duration(100)
@ -4272,16 +4282,19 @@
// callback here // callback here
} }
}); });
} });
if (!withoutFadeOut) { if (!withoutFadeOut) {
noneTargets.style("opacity", 0.3); noneTargets.style("opacity", 0.3);
} }
}; };
c3_chart_internal_fn.unexpandArc = function (id) { c3_chart_internal_fn.unexpandArc = function (targetIds) {
var $$ = this, var $$ = this, targets;
target = $$.svg.selectAll('.' + CLASS.chartArc + $$.selectorTarget(id));
target.selectAll('path.' + CLASS.arc) targetIds = $$.mapToTargetIds(targetIds);
targets = $$.svg.selectAll($$.selectorTargets(targetIds, '.' + CLASS.chartArc));
targets.selectAll('path.' + CLASS.arc)
.transition().duration(50) .transition().duration(50)
.attr("d", $$.svgArc); .attr("d", $$.svgArc);
$$.svg.selectAll('.' + CLASS.arc) $$.svg.selectAll('.' + CLASS.arc)
@ -4334,10 +4347,11 @@
var $$ = this, main = $$.main, var $$ = this, main = $$.main,
mainPieUpdate, mainPieEnter, mainPieUpdate, mainPieEnter,
classChartArc = $$.classChartArc.bind($$), classChartArc = $$.classChartArc.bind($$),
classArcs = $$.classArcs.bind($$); classArcs = $$.classArcs.bind($$),
classFocus = $$.classFocus.bind($$);
mainPieUpdate = main.select('.' + CLASS.chartArcs).selectAll('.' + CLASS.chartArc) mainPieUpdate = main.select('.' + CLASS.chartArcs).selectAll('.' + CLASS.chartArc)
.data($$.pie(targets)) .data($$.pie(targets))
.attr("class", classChartArc); .attr("class", function (d) { return classChartArc(d) + classFocus(d.data); });
mainPieEnter = mainPieUpdate.enter().append("g") mainPieEnter = mainPieUpdate.enter().append("g")
.attr("class", classChartArc); .attr("class", classChartArc);
mainPieEnter.append('g') mainPieEnter.append('g')
@ -5121,6 +5135,7 @@
zoomRect: 'c3-zoom-rect', zoomRect: 'c3-zoom-rect',
brush: 'c3-brush', brush: 'c3-brush',
focused: 'c3-focused', focused: 'c3-focused',
defocused: 'c3-defocused',
region: 'c3-region', region: 'c3-region',
regions: 'c3-regions', regions: 'c3-regions',
tooltip: 'c3-tooltip', tooltip: 'c3-tooltip',
@ -5229,6 +5244,15 @@
} }
return $$.generateClass(CLASS.target, id) + additionalClass; return $$.generateClass(CLASS.target, id) + additionalClass;
}; };
c3_chart_internal_fn.classFocus = function (d) {
return this.classFocused(d) + this.classDefocused(d);
};
c3_chart_internal_fn.classFocused = function (d) {
return ' ' + (this.focusedTargetIds.indexOf(d.id) >= 0 ? CLASS.focused : '');
};
c3_chart_internal_fn.classDefocused = function (d) {
return ' ' + (this.defocusedTargetIds.indexOf(d.id) >= 0 ? CLASS.defocused : '');
};
c3_chart_internal_fn.classChartText = function (d) { c3_chart_internal_fn.classChartText = function (d) {
return CLASS.chartText + this.classTarget(d.id); return CLASS.chartText + this.classTarget(d.id);
}; };
@ -5244,12 +5268,13 @@
c3_chart_internal_fn.getTargetSelectorSuffix = function (targetId) { c3_chart_internal_fn.getTargetSelectorSuffix = function (targetId) {
return targetId || targetId === 0 ? '-' + (targetId.replace ? targetId.replace(/([^a-zA-Z0-9-_])/g, '-') : targetId) : ''; return targetId || targetId === 0 ? '-' + (targetId.replace ? targetId.replace(/([^a-zA-Z0-9-_])/g, '-') : targetId) : '';
}; };
c3_chart_internal_fn.selectorTarget = function (id) { c3_chart_internal_fn.selectorTarget = function (id, prefix) {
return '.' + CLASS.target + this.getTargetSelectorSuffix(id); return (prefix || '') + '.' + CLASS.target + this.getTargetSelectorSuffix(id);
}; };
c3_chart_internal_fn.selectorTargets = function (ids) { c3_chart_internal_fn.selectorTargets = function (ids, prefix) {
var $$ = this; var $$ = this;
return ids.length ? ids.map(function (id) { return $$.selectorTarget(id); }) : null; ids = ids || [];
return ids.length ? ids.map(function (id) { return $$.selectorTarget(id, prefix); }) : null;
}; };
c3_chart_internal_fn.selectorLegend = function (id) { c3_chart_internal_fn.selectorLegend = function (id) {
return '.' + CLASS.legendItem + this.getTargetSelectorSuffix(id); return '.' + CLASS.legendItem + this.getTargetSelectorSuffix(id);
@ -5306,55 +5331,59 @@
return {x: minX, y: minY, width: box.width, height: box.height}; return {x: minX, y: minY, width: box.width, height: box.height};
}; };
c3_chart_fn.focus = function (targetId) { c3_chart_fn.focus = function (targetIds) {
var $$ = this.internal, var $$ = this.internal, candidates;
candidates = $$.svg.selectAll($$.selectorTarget(targetId)),
candidatesForNoneArc = candidates.filter($$.isNoneArc.bind($$)), targetIds = $$.mapToTargetIds(targetIds);
candidatesForArc = candidates.filter($$.isArc.bind($$)); candidates = $$.svg.selectAll($$.selectorTargets(targetIds)),
function focus(targets) {
$$.filterTargetsToShow(targets).transition().duration(100).style('opacity', 1);
}
this.revert(); this.revert();
this.defocus(); this.defocus();
focus(candidatesForNoneArc.classed(CLASS.focused, true)); candidates.classed(CLASS.focused, true).classed(CLASS.defocused, false);
focus(candidatesForArc);
if ($$.hasArcType()) { if ($$.hasArcType()) {
$$.expandArc(targetId, true); $$.expandArc(targetIds, true);
} }
$$.toggleFocusLegend(targetId, true); $$.toggleFocusLegend(targetIds, true);
$$.focusedTargetIds = targetIds;
$$.defocusedTargetIds = $$.defocusedTargetIds.filter(function (id) {
return targetIds.indexOf(id) < 0;
});
}; };
c3_chart_fn.defocus = function (targetId) { c3_chart_fn.defocus = function (targetIds) {
var $$ = this.internal, var $$ = this.internal, candidates;
candidates = $$.svg.selectAll($$.selectorTarget(targetId)),
candidatesForNoneArc = candidates.filter($$.isNoneArc.bind($$)), targetIds = $$.mapToTargetIds(targetIds);
candidatesForArc = candidates.filter($$.isArc.bind($$)); candidates = $$.svg.selectAll($$.selectorTargets(targetIds)),
function defocus(targets) {
$$.filterTargetsToShow(targets).transition().duration(100).style('opacity', 0.3);
}
this.revert(); this.revert();
defocus(candidatesForNoneArc.classed(CLASS.focused, false)); candidates.classed(CLASS.focused, false).classed(CLASS.defocused, true);
defocus(candidatesForArc);
if ($$.hasArcType()) { if ($$.hasArcType()) {
$$.unexpandArc(targetId); $$.unexpandArc(targetIds);
} }
$$.toggleFocusLegend(targetId, false); $$.toggleFocusLegend(targetIds, false);
$$.focusedTargetIds = $$.focusedTargetIds.filter(function (id) {
return targetIds.indexOf(id) < 0;
});
$$.defocusedTargetIds = targetIds;
}; };
c3_chart_fn.revert = function (targetId) { c3_chart_fn.revert = function (targetIds) {
var $$ = this.internal, var $$ = this.internal, candidates;
candidates = $$.svg.selectAll($$.selectorTarget(targetId)),
candidatesForNoneArc = candidates.filter($$.isNoneArc.bind($$)), targetIds = $$.mapToTargetIds(targetIds);
candidatesForArc = candidates.filter($$.isArc.bind($$)); candidates = $$.svg.selectAll($$.selectorTargets(targetIds));
function revert(targets) {
$$.filterTargetsToShow(targets).transition().duration(100).style('opacity', 1); candidates.classed(CLASS.focused, false).classed(CLASS.defocused, false);
}
revert(candidatesForNoneArc.classed(CLASS.focused, false));
revert(candidatesForArc);
if ($$.hasArcType()) { if ($$.hasArcType()) {
$$.unexpandArc(targetId); $$.unexpandArc(targetIds);
} }
$$.revertLegend(); $$.revertLegend();
$$.focusedTargetIds = [];
$$.defocusedTargetIds = [];
}; };
c3_chart_fn.show = function (targetIds, options) { c3_chart_fn.show = function (targetIds, options) {

8
c3.min.js vendored
View File

File diff suppressed because one or more lines are too long

74
src/api.focus.js
Unescape View File

@ -1,50 +1,54 @@
c3_chart_fn.focus = function (targetId) { c3_chart_fn.focus = function (targetIds) {
var $$ = this.internal, var $$ = this.internal, candidates;
candidates = $$.svg.selectAll($$.selectorTarget(targetId)),
candidatesForNoneArc = candidates.filter($$.isNoneArc.bind($$)), targetIds = $$.mapToTargetIds(targetIds);
candidatesForArc = candidates.filter($$.isArc.bind($$)); candidates = $$.svg.selectAll($$.selectorTargets(targetIds)),
function focus(targets) {
$$.filterTargetsToShow(targets).transition().duration(100).style('opacity', 1);
}
this.revert(); this.revert();
this.defocus(); this.defocus();
focus(candidatesForNoneArc.classed(CLASS.focused, true)); candidates.classed(CLASS.focused, true).classed(CLASS.defocused, false);
focus(candidatesForArc);
if ($$.hasArcType()) { if ($$.hasArcType()) {
$$.expandArc(targetId, true); $$.expandArc(targetIds, true);
} }
$$.toggleFocusLegend(targetId, true); $$.toggleFocusLegend(targetIds, true);
$$.focusedTargetIds = targetIds;
$$.defocusedTargetIds = $$.defocusedTargetIds.filter(function (id) {
return targetIds.indexOf(id) < 0;
});
}; };
c3_chart_fn.defocus = function (targetId) { c3_chart_fn.defocus = function (targetIds) {
var $$ = this.internal, var $$ = this.internal, candidates;
candidates = $$.svg.selectAll($$.selectorTarget(targetId)),
candidatesForNoneArc = candidates.filter($$.isNoneArc.bind($$)), targetIds = $$.mapToTargetIds(targetIds);
candidatesForArc = candidates.filter($$.isArc.bind($$)); candidates = $$.svg.selectAll($$.selectorTargets(targetIds)),
function defocus(targets) {
$$.filterTargetsToShow(targets).transition().duration(100).style('opacity', 0.3);
}
this.revert(); this.revert();
defocus(candidatesForNoneArc.classed(CLASS.focused, false)); candidates.classed(CLASS.focused, false).classed(CLASS.defocused, true);
defocus(candidatesForArc);
if ($$.hasArcType()) { if ($$.hasArcType()) {
$$.unexpandArc(targetId); $$.unexpandArc(targetIds);
} }
$$.toggleFocusLegend(targetId, false); $$.toggleFocusLegend(targetIds, false);
$$.focusedTargetIds = $$.focusedTargetIds.filter(function (id) {
return targetIds.indexOf(id) < 0;
});
$$.defocusedTargetIds = targetIds;
}; };
c3_chart_fn.revert = function (targetId) { c3_chart_fn.revert = function (targetIds) {
var $$ = this.internal, var $$ = this.internal, candidates;
candidates = $$.svg.selectAll($$.selectorTarget(targetId)),
candidatesForNoneArc = candidates.filter($$.isNoneArc.bind($$)), targetIds = $$.mapToTargetIds(targetIds);
candidatesForArc = candidates.filter($$.isArc.bind($$)); candidates = $$.svg.selectAll($$.selectorTargets(targetIds));
function revert(targets) {
$$.filterTargetsToShow(targets).transition().duration(100).style('opacity', 1); candidates.classed(CLASS.focused, false).classed(CLASS.defocused, false);
}
revert(candidatesForNoneArc.classed(CLASS.focused, false));
revert(candidatesForArc);
if ($$.hasArcType()) { if ($$.hasArcType()) {
$$.unexpandArc(targetId); $$.unexpandArc(targetIds);
} }
$$.revertLegend(); $$.revertLegend();
$$.focusedTargetIds = [];
$$.defocusedTargetIds = [];
}; };

36
src/arc.js
Unescape View File

@ -118,13 +118,19 @@ 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 (id, withoutFadeOut) { c3_chart_internal_fn.expandArc = function (targetIds, withoutFadeOut) {
var $$ = this, var $$ = this, targets, noneTargets;
target = $$.svg.selectAll('.' + CLASS.chartArc + $$.selectorTarget(id)),
noneTargets = $$.svg.selectAll('.' + CLASS.arc).filter(function (data) { return data.data.id !== id; }); targetIds = $$.mapToTargetIds(targetIds);
if ($$.shouldExpand(id)) { targets = $$.svg.selectAll($$.selectorTargets(targetIds, '.' + CLASS.chartArc)),
target.selectAll('path') noneTargets = $$.svg.selectAll('.' + CLASS.arc).filter(function (data) {
return targetIds.indexOf(data.data.id) < 0;
});
targets.each(function (d) {
if (! $$.shouldExpand(d.data.id)) { return; }
$$.d3.select(this).selectAll('path')
.transition().duration(50) .transition().duration(50)
.attr("d", $$.svgArcExpanded) .attr("d", $$.svgArcExpanded)
.transition().duration(100) .transition().duration(100)
@ -134,16 +140,19 @@ c3_chart_internal_fn.expandArc = function (id, withoutFadeOut) {
// callback here // callback here
} }
}); });
} });
if (!withoutFadeOut) { if (!withoutFadeOut) {
noneTargets.style("opacity", 0.3); noneTargets.style("opacity", 0.3);
} }
}; };
c3_chart_internal_fn.unexpandArc = function (id) { c3_chart_internal_fn.unexpandArc = function (targetIds) {
var $$ = this, var $$ = this, targets;
target = $$.svg.selectAll('.' + CLASS.chartArc + $$.selectorTarget(id));
target.selectAll('path.' + CLASS.arc) targetIds = $$.mapToTargetIds(targetIds);
targets = $$.svg.selectAll($$.selectorTargets(targetIds, '.' + CLASS.chartArc));
targets.selectAll('path.' + CLASS.arc)
.transition().duration(50) .transition().duration(50)
.attr("d", $$.svgArc); .attr("d", $$.svgArc);
$$.svg.selectAll('.' + CLASS.arc) $$.svg.selectAll('.' + CLASS.arc)
@ -196,10 +205,11 @@ c3_chart_internal_fn.updateTargetsForArc = function (targets) {
var $$ = this, main = $$.main, var $$ = this, main = $$.main,
mainPieUpdate, mainPieEnter, mainPieUpdate, mainPieEnter,
classChartArc = $$.classChartArc.bind($$), classChartArc = $$.classChartArc.bind($$),
classArcs = $$.classArcs.bind($$); classArcs = $$.classArcs.bind($$),
classFocus = $$.classFocus.bind($$);
mainPieUpdate = main.select('.' + CLASS.chartArcs).selectAll('.' + CLASS.chartArc) mainPieUpdate = main.select('.' + CLASS.chartArcs).selectAll('.' + CLASS.chartArc)
.data($$.pie(targets)) .data($$.pie(targets))
.attr("class", classChartArc); .attr("class", function (d) { return classChartArc(d) + classFocus(d.data); });
mainPieEnter = mainPieUpdate.enter().append("g") mainPieEnter = mainPieUpdate.enter().append("g")
.attr("class", classChartArc); .attr("class", classChartArc);
mainPieEnter.append('g') mainPieEnter.append('g')

19
src/class.js
Unescape View File

@ -23,6 +23,7 @@ var CLASS = c3_chart_internal_fn.CLASS = {
zoomRect: 'c3-zoom-rect', zoomRect: 'c3-zoom-rect',
brush: 'c3-brush', brush: 'c3-brush',
focused: 'c3-focused', focused: 'c3-focused',
defocused: 'c3-defocused',
region: 'c3-region', region: 'c3-region',
regions: 'c3-regions', regions: 'c3-regions',
tooltip: 'c3-tooltip', tooltip: 'c3-tooltip',
@ -131,6 +132,15 @@ c3_chart_internal_fn.classTarget = function (id) {
} }
return $$.generateClass(CLASS.target, id) + additionalClass; return $$.generateClass(CLASS.target, id) + additionalClass;
}; };
c3_chart_internal_fn.classFocus = function (d) {
return this.classFocused(d) + this.classDefocused(d);
};
c3_chart_internal_fn.classFocused = function (d) {
return ' ' + (this.focusedTargetIds.indexOf(d.id) >= 0 ? CLASS.focused : '');
};
c3_chart_internal_fn.classDefocused = function (d) {
return ' ' + (this.defocusedTargetIds.indexOf(d.id) >= 0 ? CLASS.defocused : '');
};
c3_chart_internal_fn.classChartText = function (d) { c3_chart_internal_fn.classChartText = function (d) {
return CLASS.chartText + this.classTarget(d.id); return CLASS.chartText + this.classTarget(d.id);
}; };
@ -146,12 +156,13 @@ c3_chart_internal_fn.classChartArc = function (d) {
c3_chart_internal_fn.getTargetSelectorSuffix = function (targetId) { c3_chart_internal_fn.getTargetSelectorSuffix = function (targetId) {
return targetId || targetId === 0 ? '-' + (targetId.replace ? targetId.replace(/([^a-zA-Z0-9-_])/g, '-') : targetId) : ''; return targetId || targetId === 0 ? '-' + (targetId.replace ? targetId.replace(/([^a-zA-Z0-9-_])/g, '-') : targetId) : '';
}; };
c3_chart_internal_fn.selectorTarget = function (id) { c3_chart_internal_fn.selectorTarget = function (id, prefix) {
return '.' + CLASS.target + this.getTargetSelectorSuffix(id); return (prefix || '') + '.' + CLASS.target + this.getTargetSelectorSuffix(id);
}; };
c3_chart_internal_fn.selectorTargets = function (ids) { c3_chart_internal_fn.selectorTargets = function (ids, prefix) {
var $$ = this; var $$ = this;
return ids.length ? ids.map(function (id) { return $$.selectorTarget(id); }) : null; ids = ids || [];
return ids.length ? ids.map(function (id) { return $$.selectorTarget(id, prefix); }) : null;
}; };
c3_chart_internal_fn.selectorLegend = function (id) { c3_chart_internal_fn.selectorLegend = function (id) {
return '.' + CLASS.legendItem + this.getTargetSelectorSuffix(id); return '.' + CLASS.legendItem + this.getTargetSelectorSuffix(id);

5
src/core.js
Unescape View File

@ -100,6 +100,8 @@ c3_chart_internal_fn.initParams = function () {
$$.hiddenTargetIds = []; $$.hiddenTargetIds = [];
$$.hiddenLegendIds = []; $$.hiddenLegendIds = [];
$$.focusedTargetIds = [];
$$.defocusedTargetIds = [];
$$.xOrient = config.axis_rotated ? "left" : "bottom"; $$.xOrient = config.axis_rotated ? "left" : "bottom";
$$.yOrient = config.axis_rotated ? "bottom" : "left"; $$.yOrient = config.axis_rotated ? "bottom" : "left";
@ -670,8 +672,7 @@ c3_chart_internal_fn.initialOpacity = function (d) {
return d.value !== null && this.withoutFadeIn[d.id] ? 1 : 0; return d.value !== null && this.withoutFadeIn[d.id] ? 1 : 0;
}; };
c3_chart_internal_fn.opacityForCircle = function (d) { c3_chart_internal_fn.opacityForCircle = function (d) {
var $$ = this; return isValue(d.value) ? this.isScatterType(d) ? 0.5 : 1 : 0;
return isValue(d.value) ? $$.isScatterType(d) ? 0.5 : 1 : 0;
}; };
c3_chart_internal_fn.opacityForText = function () { c3_chart_internal_fn.opacityForText = function () {
return this.hasDataLabel() ? 1 : 0; return this.hasDataLabel() ? 1 : 0;

13
src/legend.js
Unescape View File

@ -60,14 +60,17 @@ c3_chart_internal_fn.opacityForUnfocusedLegend = function (legendItem) {
var $$ = this; var $$ = this;
return legendItem.classed(CLASS.legendItemHidden) ? $$.legendOpacityForHidden : 0.3; return legendItem.classed(CLASS.legendItemHidden) ? $$.legendOpacityForHidden : 0.3;
}; };
c3_chart_internal_fn.toggleFocusLegend = function (id, focus) { c3_chart_internal_fn.toggleFocusLegend = function (targetIds, focus) {
var $$ = this; var $$ = this;
targetIds = $$.mapToTargetIds(targetIds);
$$.legend.selectAll('.' + CLASS.legendItem) $$.legend.selectAll('.' + CLASS.legendItem)
.classed(CLASS.legendItemFocused, function (_id) { return id === _id && focus; }) .classed(CLASS.legendItemFocused, function (id) {
return targetIds.indexOf(id) >= 0 && focus;
})
.transition().duration(100) .transition().duration(100)
.style('opacity', function (_id) { .style('opacity', function (id) {
var opacity = id === _id && focus ? $$.opacityForLegend : $$.opacityForUnfocusedLegend; var opacity = targetIds.indexOf(id) >= 0 && focus ? $$.opacityForLegend : $$.opacityForUnfocusedLegend;
return opacity($$.d3.select(this)); return opacity.call($$, $$.d3.select(this));
}); });
}; };
c3_chart_internal_fn.revertLegend = function () { c3_chart_internal_fn.revertLegend = function () {

5
src/shape.bar.js
Unescape View File

@ -7,10 +7,11 @@ c3_chart_internal_fn.updateTargetsForBar = function (targets) {
var $$ = this, config = $$.config, var $$ = this, config = $$.config,
mainBarUpdate, mainBarEnter, mainBarUpdate, mainBarEnter,
classChartBar = $$.classChartBar.bind($$), classChartBar = $$.classChartBar.bind($$),
classBars = $$.classBars.bind($$); classBars = $$.classBars.bind($$),
classFocus = $$.classFocus.bind($$);
mainBarUpdate = $$.main.select('.' + CLASS.chartBars).selectAll('.' + CLASS.chartBar) mainBarUpdate = $$.main.select('.' + CLASS.chartBars).selectAll('.' + CLASS.chartBar)
.data(targets) .data(targets)
.attr('class', classChartBar); .attr('class', function (d) { return classChartBar(d) + classFocus(d); });
mainBarEnter = mainBarUpdate.enter().append('g') mainBarEnter = mainBarUpdate.enter().append('g')
.attr('class', classChartBar) .attr('class', classChartBar)
.style('opacity', 0) .style('opacity', 0)

5
src/shape.line.js
Unescape View File

@ -9,10 +9,11 @@ c3_chart_internal_fn.updateTargetsForLine = function (targets) {
classChartLine = $$.classChartLine.bind($$), classChartLine = $$.classChartLine.bind($$),
classLines = $$.classLines.bind($$), classLines = $$.classLines.bind($$),
classAreas = $$.classAreas.bind($$), classAreas = $$.classAreas.bind($$),
classCircles = $$.classCircles.bind($$); classCircles = $$.classCircles.bind($$),
classFocus = $$.classFocus.bind($$);
mainLineUpdate = $$.main.select('.' + CLASS.chartLines).selectAll('.' + CLASS.chartLine) mainLineUpdate = $$.main.select('.' + CLASS.chartLines).selectAll('.' + CLASS.chartLine)
.data(targets) .data(targets)
.attr('class', classChartLine); .attr('class', function (d) { return classChartLine(d) + classFocus(d); });
mainLineEnter = mainLineUpdate.enter().append('g') mainLineEnter = mainLineUpdate.enter().append('g')
.attr('class', classChartLine) .attr('class', classChartLine)
.style('opacity', 0) .style('opacity', 0)

5
src/text.js
Unescape View File

@ -7,10 +7,11 @@ c3_chart_internal_fn.initText = function () {
c3_chart_internal_fn.updateTargetsForText = function (targets) { c3_chart_internal_fn.updateTargetsForText = function (targets) {
var $$ = this, mainTextUpdate, mainTextEnter, var $$ = this, mainTextUpdate, mainTextEnter,
classChartText = $$.classChartText.bind($$), classChartText = $$.classChartText.bind($$),
classTexts = $$.classTexts.bind($$); classTexts = $$.classTexts.bind($$),
classFocus = $$.classFocus.bind($$);
mainTextUpdate = $$.main.select('.' + CLASS.chartTexts).selectAll('.' + CLASS.chartText) mainTextUpdate = $$.main.select('.' + CLASS.chartTexts).selectAll('.' + CLASS.chartText)
.data(targets) .data(targets)
.attr('class', classChartText); .attr('class', function (d) { return classChartText(d) + classFocus(d); });
mainTextEnter = mainTextUpdate.enter().append('g') mainTextEnter = mainTextUpdate.enter().append('g')
.attr('class', classChartText) .attr('class', classChartText)
.style('opacity', 0) .style('opacity', 0)

Write Preview
Loading…
Cancel
Save