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 @@
index -= 1;
}
$$.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(
......@@ -2300,7 +2303,10 @@
// select if selection enabled
if ($$.dist(closest, mouse) < 100 && $$.toggleShape) {
$$.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 @@
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) {
var $$ = this;
......@@ -4411,13 +4430,10 @@
$$.config.data_onmouseout(arcData, this);
})
.on('click', function (d, i) {
var updated, arcData;
if (!$$.toggleShape) {
return;
}
updated = $$.updateAngle(d);
arcData = $$.convertToArcData(updated);
$$.toggleShape(this, arcData, i); // onclick called in toogleShape()
var updated = $$.updateAngle(d),
arcData = $$.convertToArcData(updated);
if ($$.toggleShape) { $$.toggleShape(this, arcData, i); }
$$.config.data_onclick.call($$.api, arcData, this);
});
mainArc
.attr("transform", function (d) { return !$$.isGaugeType(d.data) && withTransform ? "scale(0)" : ""; })
......@@ -4710,45 +4726,40 @@
c3_chart_internal_fn.toggleArc = function (selected, target, d, i) {
this.toggleBar(selected, target, d.data, i);
};
c3_chart_internal_fn.getToggle = function (that) {
var $$ = this;
// path selection not supported yet
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;
c3_chart_internal_fn.getToggle = function (that, d) {
var $$ = this,
shape = $$.d3.select(that), toggle;
if (that.nodeName === 'circle') {
if ($$.isStepType(d)) {
// circle is hidden in step chart, so treat as within the click area
isWithin = true;
toggle = function () {}; // TODO: how to select step chart?
} else {
isWithin = $$.isWithinCircle(that, $$.pointSelectR(d) * 1.5);
toggle = $$.togglePoint;
}
}
else if (that.nodeName === 'path') {
if (shape.classed(CLASS.bar)) {
isWithin = $$.isWithinBar(that);
toggle = $$.toggleBar;
} else { // would be arc
isWithin = true;
toggle = $$.toggleArc;
}
}
if (config.data_selection_grouped || isWithin) {
if (config.data_selection_enabled && config.data_selection_isselectable(d)) {
if (!config.data_selection_multiple) {
$$.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.call($$, false, shape.classed(CLASS.SELECTED, false), d, i); }
});
}
shape.classed(CLASS.SELECTED, !isSelected);
toggle.call($$, !isSelected, shape, d, i);
return toggle;
};
c3_chart_internal_fn.toggleShape = function (that, d, i) {
var $$ = this, d3 = $$.d3, config = $$.config,
shape = d3.select(that), isSelected = shape.classed(CLASS.SELECTED),
toggle = $$.getToggle(that, d).bind($$);
if (config.data_selection_enabled && config.data_selection_isselectable(d)) {
if (!config.data_selection_multiple) {
$$.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 @@
if (! config.data_selection_enabled) { return; }
$$.main.selectAll('.' + CLASS.shapes).selectAll('.' + CLASS.shape).each(function (d, i) {
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,
isTargetIndex = !indices || indices.indexOf(i) >= 0,
isSelected = shape.classed(CLASS.SELECTED);
......@@ -5783,7 +5794,7 @@
if (! config.data_selection_enabled) { return; }
$$.main.selectAll('.' + CLASS.shapes).selectAll('.' + CLASS.shape).each(function (d, i) {
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,
isTargetIndex = !indices || indices.indexOf(i) >= 0,
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) {
if (! config.data_selection_enabled) { return; }
$$.main.selectAll('.' + CLASS.shapes).selectAll('.' + CLASS.shape).each(function (d, i) {
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,
isTargetIndex = !indices || indices.indexOf(i) >= 0,
isSelected = shape.classed(CLASS.SELECTED);
......@@ -35,7 +35,7 @@ c3_chart_fn.unselect = function (ids, indices) {
if (! config.data_selection_enabled) { return; }
$$.main.selectAll('.' + CLASS.shapes).selectAll('.' + CLASS.shape).each(function (d, i) {
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,
isTargetIndex = !indices || indices.indexOf(i) >= 0,
isSelected = shape.classed(CLASS.SELECTED);
......
src/arc.js
View file @ 6ccefd9d
......@@ -272,13 +272,10 @@ c3_chart_internal_fn.redrawArc = function (duration, durationForExit, withTransf
$$.config.data_onmouseout(arcData, this);
})
.on('click', function (d, i) {
var updated, arcData;
if (!$$.toggleShape) {
return;
}
updated = $$.updateAngle(d);
arcData = $$.convertToArcData(updated);
$$.toggleShape(this, arcData, i); // onclick called in toogleShape()
var updated = $$.updateAngle(d),
arcData = $$.convertToArcData(updated);
if ($$.toggleShape) { $$.toggleShape(this, arcData, i); }
$$.config.data_onclick.call($$.api, arcData, this);
});
mainArc
.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) {
index -= 1;
}
$$.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(
......@@ -307,7 +310,10 @@ c3_chart_internal_fn.generateEventRectsForMultipleXs = function (eventRectEnter)
// select if selection enabled
if ($$.dist(closest, mouse) < 100 && $$.toggleShape) {
$$.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) {
c3_chart_internal_fn.toggleArc = function (selected, target, d, i) {
this.toggleBar(selected, target, d.data, i);
};
c3_chart_internal_fn.getToggle = function (that) {
var $$ = this;
// path selection not supported yet
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;
c3_chart_internal_fn.getToggle = function (that, d) {
var $$ = this,
shape = $$.d3.select(that), toggle;
if (that.nodeName === 'circle') {
if ($$.isStepType(d)) {
// circle is hidden in step chart, so treat as within the click area
isWithin = true;
toggle = function () {}; // TODO: how to select step chart?
} else {
isWithin = $$.isWithinCircle(that, $$.pointSelectR(d) * 1.5);
toggle = $$.togglePoint;
}
}
else if (that.nodeName === 'path') {
if (shape.classed(CLASS.bar)) {
isWithin = $$.isWithinBar(that);
toggle = $$.toggleBar;
} else { // would be arc
isWithin = true;
toggle = $$.toggleArc;
}
}
if (config.data_selection_grouped || isWithin) {
if (config.data_selection_enabled && config.data_selection_isselectable(d)) {
if (!config.data_selection_multiple) {
$$.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.call($$, false, shape.classed(CLASS.SELECTED, false), d, i); }
});
}
shape.classed(CLASS.SELECTED, !isSelected);
toggle.call($$, !isSelected, shape, d, i);
return toggle;
};
c3_chart_internal_fn.toggleShape = function (that, d, i) {
var $$ = this, d3 = $$.d3, config = $$.config,
shape = d3.select(that), isSelected = shape.classed(CLASS.SELECTED),
toggle = $$.getToggle(that, d).bind($$);
if (config.data_selection_enabled && config.data_selection_isselectable(d)) {
if (!config.data_selection_multiple) {
$$.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) {
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) {
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