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

Refactor data.onclick

pull/555/head
Masayuki Tanaka 10 years ago
parent
2cb20df9ea
commit
6ccefd9d78
7 changed files with 93 additions and 71 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 79
      c3.js
  2. 6
      c3.min.js
  3. 4
      src/api.selection.js
  4. 11
      src/arc.js
  5. 10
      src/interaction.js
  6. 41
      src/selection.js
  7. 13
      src/shape.js

79
c3.js
Unescape View File

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

6
c3.min.js vendored
View File

File diff suppressed because one or more lines are too long

4
src/api.selection.js
Unescape View File

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

11
src/arc.js
Unescape View File

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

10
src/interaction.js
Unescape View File

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

41
src/selection.js
Unescape View File

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

13
src/shape.js
Unescape View File

@ -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;

Write Preview
Loading…
Cancel
Save