Skip to content

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

Refactor data.onclick

parent 2cb20df9
Hide whitespace changes
Inline Side-by-side
Showing with 90 additions and 68 deletions
c3.js
View file @ 6ccefd9d
...@@ -2215,7 +2215,10 @@ ...@@ -2215,7 +2215,10 @@
index -= 1; index -= 1;
} }
$$.main.selectAll('.' + CLASS.shape + '-' + index).each(function (d) { $$.main.selectAll('.' + CLASS.shape + '-' + index).each(function (d) {
$$.toggleShape(this, d, index); if (config.data_selection_grouped || $$.isWithinShape(this, d)) {
$$.toggleShape(this, d, index);
$$.config.data_onclick.call($$.api, d, this);
}
}); });
}) })
.call( .call(
...@@ -2300,7 +2303,10 @@ ...@@ -2300,7 +2303,10 @@
// select if selection enabled // select if selection enabled
if ($$.dist(closest, mouse) < 100 && $$.toggleShape) { if ($$.dist(closest, mouse) < 100 && $$.toggleShape) {
$$.main.select('.' + CLASS.circles + $$.getTargetSelectorSuffix(closest.id)).select('.' + CLASS.circle + '-' + closest.index).each(function () { $$.main.select('.' + CLASS.circles + $$.getTargetSelectorSuffix(closest.id)).select('.' + CLASS.circle + '-' + closest.index).each(function () {
$$.toggleShape(this, closest, closest.index); if (config.data_selection_grouped || $$.isWithinShape(this, closest)) {
$$.toggleShape(this, closest, closest.index);
$$.config.data_onclick.call($$.api, closest, this);
}
}); });
} }
}) })
...@@ -2476,6 +2482,19 @@ ...@@ -2476,6 +2482,19 @@
return offset; return offset;
}; };
}; };
c3_chart_internal_fn.isWithinShape = function (that, d) {
var $$ = this,
shape = $$.d3.select(that), isWithin;
if (that.nodeName === 'circle') {
// circle is hidden in step chart, so treat as within the click area
isWithin = $$.isStepType(d) ? true : $$.isWithinCircle(that, $$.pointSelectR(d) * 1.5);
}
else if (that.nodeName === 'path') {
isWithin = shape.classed(CLASS.bar) ? $$.isWithinBar(that) : true;
}
return isWithin;
};
c3_chart_internal_fn.getInterpolate = function (d) { c3_chart_internal_fn.getInterpolate = function (d) {
var $$ = this; var $$ = this;
...@@ -4411,13 +4430,10 @@ ...@@ -4411,13 +4430,10 @@
$$.config.data_onmouseout(arcData, this); $$.config.data_onmouseout(arcData, this);
}) })
.on('click', function (d, i) { .on('click', function (d, i) {
var updated, arcData; var updated = $$.updateAngle(d),
if (!$$.toggleShape) { arcData = $$.convertToArcData(updated);
return; if ($$.toggleShape) { $$.toggleShape(this, arcData, i); }
} $$.config.data_onclick.call($$.api, arcData, this);
updated = $$.updateAngle(d);
arcData = $$.convertToArcData(updated);
$$.toggleShape(this, arcData, i); // onclick called in toogleShape()
}); });
mainArc mainArc
.attr("transform", function (d) { return !$$.isGaugeType(d.data) && withTransform ? "scale(0)" : ""; }) .attr("transform", function (d) { return !$$.isGaugeType(d.data) && withTransform ? "scale(0)" : ""; })
...@@ -4710,45 +4726,40 @@ ...@@ -4710,45 +4726,40 @@
c3_chart_internal_fn.toggleArc = function (selected, target, d, i) { c3_chart_internal_fn.toggleArc = function (selected, target, d, i) {
this.toggleBar(selected, target, d.data, i); this.toggleBar(selected, target, d.data, i);
}; };
c3_chart_internal_fn.getToggle = function (that) { c3_chart_internal_fn.getToggle = function (that, d) {
var $$ = this; var $$ = this,
// path selection not supported yet shape = $$.d3.select(that), toggle;
return that.nodeName === 'circle' ? $$.togglePoint : ($$.d3.select(that).classed(CLASS.bar) ? $$.toggleBar : $$.toggleArc);
};
c3_chart_internal_fn.toggleShape = function (that, d, i) {
var $$ = this, d3 = $$.d3, config = $$.config,
shape = d3.select(that), isSelected = shape.classed(CLASS.SELECTED), isWithin, toggle;
if (that.nodeName === 'circle') { if (that.nodeName === 'circle') {
if ($$.isStepType(d)) { if ($$.isStepType(d)) {
// circle is hidden in step chart, so treat as within the click area // circle is hidden in step chart, so treat as within the click area
isWithin = true;
toggle = function () {}; // TODO: how to select step chart? toggle = function () {}; // TODO: how to select step chart?
} else { } else {
isWithin = $$.isWithinCircle(that, $$.pointSelectR(d) * 1.5);
toggle = $$.togglePoint; toggle = $$.togglePoint;
} }
} }
else if (that.nodeName === 'path') { else if (that.nodeName === 'path') {
if (shape.classed(CLASS.bar)) { if (shape.classed(CLASS.bar)) {
isWithin = $$.isWithinBar(that);
toggle = $$.toggleBar; toggle = $$.toggleBar;
} else { // would be arc } else { // would be arc
isWithin = true;
toggle = $$.toggleArc; toggle = $$.toggleArc;
} }
} }
if (config.data_selection_grouped || isWithin) { return toggle;
if (config.data_selection_enabled && config.data_selection_isselectable(d)) { };
if (!config.data_selection_multiple) { c3_chart_internal_fn.toggleShape = function (that, d, i) {
$$.main.selectAll('.' + CLASS.shapes + (config.data_selection_grouped ? $$.getTargetSelectorSuffix(d.id) : "")).selectAll('.' + CLASS.shape).each(function (d, i) { var $$ = this, d3 = $$.d3, config = $$.config,
var shape = d3.select(this); shape = d3.select(that), isSelected = shape.classed(CLASS.SELECTED),
if (shape.classed(CLASS.SELECTED)) { toggle.call($$, false, shape.classed(CLASS.SELECTED, false), d, i); } toggle = $$.getToggle(that, d).bind($$);
});
} if (config.data_selection_enabled && config.data_selection_isselectable(d)) {
shape.classed(CLASS.SELECTED, !isSelected); if (!config.data_selection_multiple) {
toggle.call($$, !isSelected, shape, d, i); $$.main.selectAll('.' + CLASS.shapes + (config.data_selection_grouped ? $$.getTargetSelectorSuffix(d.id) : "")).selectAll('.' + CLASS.shape).each(function (d, i) {
var shape = d3.select(this);
if (shape.classed(CLASS.SELECTED)) { toggle(false, shape.classed(CLASS.SELECTED, false), d, i); }
});
} }
$$.config.data_onclick.call($$.api, d, that); shape.classed(CLASS.SELECTED, !isSelected);
toggle(!isSelected, shape, d, i);
} }
}; };
...@@ -5759,7 +5770,7 @@ ...@@ -5759,7 +5770,7 @@
if (! config.data_selection_enabled) { return; } if (! config.data_selection_enabled) { return; }
$$.main.selectAll('.' + CLASS.shapes).selectAll('.' + CLASS.shape).each(function (d, i) { $$.main.selectAll('.' + CLASS.shapes).selectAll('.' + CLASS.shape).each(function (d, i) {
var shape = d3.select(this), id = d.data ? d.data.id : d.id, var shape = d3.select(this), id = d.data ? d.data.id : d.id,
toggle = $$.getToggle(this).bind($$), toggle = $$.getToggle(this, d).bind($$),
isTargetId = config.data_selection_grouped || !ids || ids.indexOf(id) >= 0, isTargetId = config.data_selection_grouped || !ids || ids.indexOf(id) >= 0,
isTargetIndex = !indices || indices.indexOf(i) >= 0, isTargetIndex = !indices || indices.indexOf(i) >= 0,
isSelected = shape.classed(CLASS.SELECTED); isSelected = shape.classed(CLASS.SELECTED);
...@@ -5783,7 +5794,7 @@ ...@@ -5783,7 +5794,7 @@
if (! config.data_selection_enabled) { return; } if (! config.data_selection_enabled) { return; }
$$.main.selectAll('.' + CLASS.shapes).selectAll('.' + CLASS.shape).each(function (d, i) { $$.main.selectAll('.' + CLASS.shapes).selectAll('.' + CLASS.shape).each(function (d, i) {
var shape = d3.select(this), id = d.data ? d.data.id : d.id, var shape = d3.select(this), id = d.data ? d.data.id : d.id,
toggle = $$.getToggle(this).bind($$), toggle = $$.getToggle(this, d).bind($$),
isTargetId = config.data_selection_grouped || !ids || ids.indexOf(id) >= 0, isTargetId = config.data_selection_grouped || !ids || ids.indexOf(id) >= 0,
isTargetIndex = !indices || indices.indexOf(i) >= 0, isTargetIndex = !indices || indices.indexOf(i) >= 0,
isSelected = shape.classed(CLASS.SELECTED); isSelected = shape.classed(CLASS.SELECTED);
......
c3.min.js
View file @ 6ccefd9d
This source diff could not be displayed because it is too large. You can view the blob instead.
src/api.selection.js
View file @ 6ccefd9d
...@@ -11,7 +11,7 @@ c3_chart_fn.select = function (ids, indices, resetOther) { ...@@ -11,7 +11,7 @@ c3_chart_fn.select = function (ids, indices, resetOther) {
if (! config.data_selection_enabled) { return; } if (! config.data_selection_enabled) { return; }
$$.main.selectAll('.' + CLASS.shapes).selectAll('.' + CLASS.shape).each(function (d, i) { $$.main.selectAll('.' + CLASS.shapes).selectAll('.' + CLASS.shape).each(function (d, i) {
var shape = d3.select(this), id = d.data ? d.data.id : d.id, var shape = d3.select(this), id = d.data ? d.data.id : d.id,
toggle = $$.getToggle(this).bind($$), toggle = $$.getToggle(this, d).bind($$),
isTargetId = config.data_selection_grouped || !ids || ids.indexOf(id) >= 0, isTargetId = config.data_selection_grouped || !ids || ids.indexOf(id) >= 0,
isTargetIndex = !indices || indices.indexOf(i) >= 0, isTargetIndex = !indices || indices.indexOf(i) >= 0,
isSelected = shape.classed(CLASS.SELECTED); isSelected = shape.classed(CLASS.SELECTED);
...@@ -35,7 +35,7 @@ c3_chart_fn.unselect = function (ids, indices) { ...@@ -35,7 +35,7 @@ c3_chart_fn.unselect = function (ids, indices) {
if (! config.data_selection_enabled) { return; } if (! config.data_selection_enabled) { return; }
$$.main.selectAll('.' + CLASS.shapes).selectAll('.' + CLASS.shape).each(function (d, i) { $$.main.selectAll('.' + CLASS.shapes).selectAll('.' + CLASS.shape).each(function (d, i) {
var shape = d3.select(this), id = d.data ? d.data.id : d.id, var shape = d3.select(this), id = d.data ? d.data.id : d.id,
toggle = $$.getToggle(this).bind($$), toggle = $$.getToggle(this, d).bind($$),
isTargetId = config.data_selection_grouped || !ids || ids.indexOf(id) >= 0, isTargetId = config.data_selection_grouped || !ids || ids.indexOf(id) >= 0,
isTargetIndex = !indices || indices.indexOf(i) >= 0, isTargetIndex = !indices || indices.indexOf(i) >= 0,
isSelected = shape.classed(CLASS.SELECTED); isSelected = shape.classed(CLASS.SELECTED);
......
src/arc.js
View file @ 6ccefd9d
...@@ -272,13 +272,10 @@ c3_chart_internal_fn.redrawArc = function (duration, durationForExit, withTransf ...@@ -272,13 +272,10 @@ c3_chart_internal_fn.redrawArc = function (duration, durationForExit, withTransf
$$.config.data_onmouseout(arcData, this); $$.config.data_onmouseout(arcData, this);
}) })
.on('click', function (d, i) { .on('click', function (d, i) {
var updated, arcData; var updated = $$.updateAngle(d),
if (!$$.toggleShape) { arcData = $$.convertToArcData(updated);
return; if ($$.toggleShape) { $$.toggleShape(this, arcData, i); }
} $$.config.data_onclick.call($$.api, arcData, this);
updated = $$.updateAngle(d);
arcData = $$.convertToArcData(updated);
$$.toggleShape(this, arcData, i); // onclick called in toogleShape()
}); });
mainArc mainArc
.attr("transform", function (d) { return !$$.isGaugeType(d.data) && withTransform ? "scale(0)" : ""; }) .attr("transform", function (d) { return !$$.isGaugeType(d.data) && withTransform ? "scale(0)" : ""; })
......
src/interaction.js
View file @ 6ccefd9d
...@@ -222,7 +222,10 @@ c3_chart_internal_fn.generateEventRectsForSingleX = function (eventRectEnter) { ...@@ -222,7 +222,10 @@ c3_chart_internal_fn.generateEventRectsForSingleX = function (eventRectEnter) {
index -= 1; index -= 1;
} }
$$.main.selectAll('.' + CLASS.shape + '-' + index).each(function (d) { $$.main.selectAll('.' + CLASS.shape + '-' + index).each(function (d) {
$$.toggleShape(this, d, index); if (config.data_selection_grouped || $$.isWithinShape(this, d)) {
$$.toggleShape(this, d, index);
$$.config.data_onclick.call($$.api, d, this);
}
}); });
}) })
.call( .call(
...@@ -307,7 +310,10 @@ c3_chart_internal_fn.generateEventRectsForMultipleXs = function (eventRectEnter) ...@@ -307,7 +310,10 @@ c3_chart_internal_fn.generateEventRectsForMultipleXs = function (eventRectEnter)
// select if selection enabled // select if selection enabled
if ($$.dist(closest, mouse) < 100 && $$.toggleShape) { if ($$.dist(closest, mouse) < 100 && $$.toggleShape) {
$$.main.select('.' + CLASS.circles + $$.getTargetSelectorSuffix(closest.id)).select('.' + CLASS.circle + '-' + closest.index).each(function () { $$.main.select('.' + CLASS.circles + $$.getTargetSelectorSuffix(closest.id)).select('.' + CLASS.circle + '-' + closest.index).each(function () {
$$.toggleShape(this, closest, closest.index); if (config.data_selection_grouped || $$.isWithinShape(this, closest)) {
$$.toggleShape(this, closest, closest.index);
$$.config.data_onclick.call($$.api, closest, this);
}
}); });
} }
}) })
......
src/selection.js
View file @ 6ccefd9d
...@@ -45,44 +45,39 @@ c3_chart_internal_fn.toggleBar = function (selected, target, d, i) { ...@@ -45,44 +45,39 @@ c3_chart_internal_fn.toggleBar = function (selected, target, d, i) {
c3_chart_internal_fn.toggleArc = function (selected, target, d, i) { c3_chart_internal_fn.toggleArc = function (selected, target, d, i) {
this.toggleBar(selected, target, d.data, i); this.toggleBar(selected, target, d.data, i);
}; };
c3_chart_internal_fn.getToggle = function (that) { c3_chart_internal_fn.getToggle = function (that, d) {
var $$ = this; var $$ = this,
// path selection not supported yet shape = $$.d3.select(that), toggle;
return that.nodeName === 'circle' ? $$.togglePoint : ($$.d3.select(that).classed(CLASS.bar) ? $$.toggleBar : $$.toggleArc);
};
c3_chart_internal_fn.toggleShape = function (that, d, i) {
var $$ = this, d3 = $$.d3, config = $$.config,
shape = d3.select(that), isSelected = shape.classed(CLASS.SELECTED), isWithin, toggle;
if (that.nodeName === 'circle') { if (that.nodeName === 'circle') {
if ($$.isStepType(d)) { if ($$.isStepType(d)) {
// circle is hidden in step chart, so treat as within the click area // circle is hidden in step chart, so treat as within the click area
isWithin = true;
toggle = function () {}; // TODO: how to select step chart? toggle = function () {}; // TODO: how to select step chart?
} else { } else {
isWithin = $$.isWithinCircle(that, $$.pointSelectR(d) * 1.5);
toggle = $$.togglePoint; toggle = $$.togglePoint;
} }
} }
else if (that.nodeName === 'path') { else if (that.nodeName === 'path') {
if (shape.classed(CLASS.bar)) { if (shape.classed(CLASS.bar)) {
isWithin = $$.isWithinBar(that);
toggle = $$.toggleBar; toggle = $$.toggleBar;
} else { // would be arc } else { // would be arc
isWithin = true;
toggle = $$.toggleArc; toggle = $$.toggleArc;
} }
} }
if (config.data_selection_grouped || isWithin) { return toggle;
if (config.data_selection_enabled && config.data_selection_isselectable(d)) { };
if (!config.data_selection_multiple) { c3_chart_internal_fn.toggleShape = function (that, d, i) {
$$.main.selectAll('.' + CLASS.shapes + (config.data_selection_grouped ? $$.getTargetSelectorSuffix(d.id) : "")).selectAll('.' + CLASS.shape).each(function (d, i) { var $$ = this, d3 = $$.d3, config = $$.config,
var shape = d3.select(this); shape = d3.select(that), isSelected = shape.classed(CLASS.SELECTED),
if (shape.classed(CLASS.SELECTED)) { toggle.call($$, false, shape.classed(CLASS.SELECTED, false), d, i); } toggle = $$.getToggle(that, d).bind($$);
});
} if (config.data_selection_enabled && config.data_selection_isselectable(d)) {
shape.classed(CLASS.SELECTED, !isSelected); if (!config.data_selection_multiple) {
toggle.call($$, !isSelected, shape, d, i); $$.main.selectAll('.' + CLASS.shapes + (config.data_selection_grouped ? $$.getTargetSelectorSuffix(d.id) : "")).selectAll('.' + CLASS.shape).each(function (d, i) {
var shape = d3.select(this);
if (shape.classed(CLASS.SELECTED)) { toggle(false, shape.classed(CLASS.SELECTED, false), d, i); }
});
} }
$$.config.data_onclick.call($$.api, d, that); shape.classed(CLASS.SELECTED, !isSelected);
toggle(!isSelected, shape, d, i);
} }
}; };
src/shape.js
View file @ 6ccefd9d
...@@ -46,6 +46,19 @@ c3_chart_internal_fn.getShapeOffset = function (typeFilter, indices, isSub) { ...@@ -46,6 +46,19 @@ c3_chart_internal_fn.getShapeOffset = function (typeFilter, indices, isSub) {
return offset; return offset;
}; };
}; };
c3_chart_internal_fn.isWithinShape = function (that, d) {
var $$ = this,
shape = $$.d3.select(that), isWithin;
if (that.nodeName === 'circle') {
// circle is hidden in step chart, so treat as within the click area
isWithin = $$.isStepType(d) ? true : $$.isWithinCircle(that, $$.pointSelectR(d) * 1.5);
}
else if (that.nodeName === 'path') {
isWithin = shape.classed(CLASS.bar) ? $$.isWithinBar(that) : true;
}
return isWithin;
};
c3_chart_internal_fn.getInterpolate = function (d) { c3_chart_internal_fn.getInterpolate = function (d) {
var $$ = this; var $$ = this;
......
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