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

Apply clip path to subchart - #448

pull/681/head
Masayuki Tanaka 10 years ago
parent
b52fdaee2a
commit
c76c89273b
4 changed files with 23 additions and 9 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. 11
      c3.js
  2. 10
      c3.min.js
  3. 9
      src/core.js
  4. 2
      src/subchart.js

11
c3.js
Unescape View File

@ -77,10 +77,12 @@
$$.clipIdForXAxis = $$.clipId + '-xaxis', $$.clipIdForXAxis = $$.clipId + '-xaxis',
$$.clipIdForYAxis = $$.clipId + '-yaxis', $$.clipIdForYAxis = $$.clipId + '-yaxis',
$$.clipIdForGrid = $$.clipId + '-grid', $$.clipIdForGrid = $$.clipId + '-grid',
$$.clipIdForSubchart = $$.clipId + '-subchart',
$$.clipPath = $$.getClipPath($$.clipId), $$.clipPath = $$.getClipPath($$.clipId),
$$.clipPathForXAxis = $$.getClipPath($$.clipIdForXAxis), $$.clipPathForXAxis = $$.getClipPath($$.clipIdForXAxis),
$$.clipPathForYAxis = $$.getClipPath($$.clipIdForYAxis); $$.clipPathForYAxis = $$.getClipPath($$.clipIdForYAxis);
$$.clipPathForGrid = $$.getClipPath($$.clipIdForGrid), $$.clipPathForGrid = $$.getClipPath($$.clipIdForGrid),
$$.clipPathForSubchart = $$.getClipPath($$.clipIdForSubchart),
$$.dragStart = null; $$.dragStart = null;
$$.dragging = false; $$.dragging = false;
@ -206,6 +208,7 @@
$$.clipXAxis = $$.appendClip(defs, $$.clipIdForXAxis); $$.clipXAxis = $$.appendClip(defs, $$.clipIdForXAxis);
$$.clipYAxis = $$.appendClip(defs, $$.clipIdForYAxis); $$.clipYAxis = $$.appendClip(defs, $$.clipIdForYAxis);
$$.clipGrid = $$.appendClip(defs, $$.clipIdForGrid); $$.clipGrid = $$.appendClip(defs, $$.clipIdForGrid);
$$.clipSubchart = $$.appendClip(defs, $$.clipIdForSubchart);
$$.updateSvgSize(); $$.updateSvgSize();
// Define regions // Define regions
@ -751,7 +754,8 @@
}; };
c3_chart_internal_fn.updateSvgSize = function () { c3_chart_internal_fn.updateSvgSize = function () {
var $$ = this; var $$ = this,
brush = $$.svg.select(".c3-brush .background");
$$.svg.attr('width', $$.currentWidth).attr('height', $$.currentHeight); $$.svg.attr('width', $$.currentWidth).attr('height', $$.currentHeight);
$$.svg.selectAll(['#' + $$.clipId, '#' + $$.clipIdForGrid]).select('rect') $$.svg.selectAll(['#' + $$.clipId, '#' + $$.clipIdForGrid]).select('rect')
.attr('width', $$.width) .attr('width', $$.width)
@ -766,6 +770,9 @@
.attr('y', $$.getYAxisClipY.bind($$)) .attr('y', $$.getYAxisClipY.bind($$))
.attr('width', $$.getYAxisClipWidth.bind($$)) .attr('width', $$.getYAxisClipWidth.bind($$))
.attr('height', $$.getYAxisClipHeight.bind($$)); .attr('height', $$.getYAxisClipHeight.bind($$));
$$.svg.select('#' + $$.clipIdForSubchart).select('rect')
.attr('width', $$.width)
.attr('height', brush.size() ? brush.attr('height') : 0);
$$.svg.select('.' + CLASS.zoomRect) $$.svg.select('.' + CLASS.zoomRect)
.attr('width', $$.width) .attr('width', $$.width)
.attr('height', $$.height); .attr('height', $$.height);
@ -4946,7 +4953,7 @@
// Define g for chart area // Define g for chart area
context.append('g') context.append('g')
.attr("clip-path", $$.clipPath) .attr("clip-path", $$.clipPathForSubchart)
.attr('class', CLASS.chart); .attr('class', CLASS.chart);
// Define g for bar chart area // Define g for bar chart area

10
c3.min.js vendored
View File

File diff suppressed because one or more lines are too long

9
src/core.js
Unescape View File

@ -72,10 +72,12 @@ c3_chart_internal_fn.initParams = function () {
$$.clipIdForXAxis = $$.clipId + '-xaxis', $$.clipIdForXAxis = $$.clipId + '-xaxis',
$$.clipIdForYAxis = $$.clipId + '-yaxis', $$.clipIdForYAxis = $$.clipId + '-yaxis',
$$.clipIdForGrid = $$.clipId + '-grid', $$.clipIdForGrid = $$.clipId + '-grid',
$$.clipIdForSubchart = $$.clipId + '-subchart',
$$.clipPath = $$.getClipPath($$.clipId), $$.clipPath = $$.getClipPath($$.clipId),
$$.clipPathForXAxis = $$.getClipPath($$.clipIdForXAxis), $$.clipPathForXAxis = $$.getClipPath($$.clipIdForXAxis),
$$.clipPathForYAxis = $$.getClipPath($$.clipIdForYAxis); $$.clipPathForYAxis = $$.getClipPath($$.clipIdForYAxis);
$$.clipPathForGrid = $$.getClipPath($$.clipIdForGrid), $$.clipPathForGrid = $$.getClipPath($$.clipIdForGrid),
$$.clipPathForSubchart = $$.getClipPath($$.clipIdForSubchart),
$$.dragStart = null; $$.dragStart = null;
$$.dragging = false; $$.dragging = false;
@ -201,6 +203,7 @@ c3_chart_internal_fn.initWithData = function (data) {
$$.clipXAxis = $$.appendClip(defs, $$.clipIdForXAxis); $$.clipXAxis = $$.appendClip(defs, $$.clipIdForXAxis);
$$.clipYAxis = $$.appendClip(defs, $$.clipIdForYAxis); $$.clipYAxis = $$.appendClip(defs, $$.clipIdForYAxis);
$$.clipGrid = $$.appendClip(defs, $$.clipIdForGrid); $$.clipGrid = $$.appendClip(defs, $$.clipIdForGrid);
$$.clipSubchart = $$.appendClip(defs, $$.clipIdForSubchart);
$$.updateSvgSize(); $$.updateSvgSize();
// Define regions // Define regions
@ -746,7 +749,8 @@ c3_chart_internal_fn.transformAll = function (withTransition, transitions) {
}; };
c3_chart_internal_fn.updateSvgSize = function () { c3_chart_internal_fn.updateSvgSize = function () {
var $$ = this; var $$ = this,
brush = $$.svg.select(".c3-brush .background");
$$.svg.attr('width', $$.currentWidth).attr('height', $$.currentHeight); $$.svg.attr('width', $$.currentWidth).attr('height', $$.currentHeight);
$$.svg.selectAll(['#' + $$.clipId, '#' + $$.clipIdForGrid]).select('rect') $$.svg.selectAll(['#' + $$.clipId, '#' + $$.clipIdForGrid]).select('rect')
.attr('width', $$.width) .attr('width', $$.width)
@ -761,6 +765,9 @@ c3_chart_internal_fn.updateSvgSize = function () {
.attr('y', $$.getYAxisClipY.bind($$)) .attr('y', $$.getYAxisClipY.bind($$))
.attr('width', $$.getYAxisClipWidth.bind($$)) .attr('width', $$.getYAxisClipWidth.bind($$))
.attr('height', $$.getYAxisClipHeight.bind($$)); .attr('height', $$.getYAxisClipHeight.bind($$));
$$.svg.select('#' + $$.clipIdForSubchart).select('rect')
.attr('width', $$.width)
.attr('height', brush.size() ? brush.attr('height') : 0);
$$.svg.select('.' + CLASS.zoomRect) $$.svg.select('.' + CLASS.zoomRect)
.attr('width', $$.width) .attr('width', $$.width)
.attr('height', $$.height); .attr('height', $$.height);

2
src/subchart.js
Unescape View File

@ -19,7 +19,7 @@ c3_chart_internal_fn.initSubchart = function () {
// Define g for chart area // Define g for chart area
context.append('g') context.append('g')
.attr("clip-path", $$.clipPath) .attr("clip-path", $$.clipPathForSubchart)
.attr('class', CLASS.chart); .attr('class', CLASS.chart);
// Define g for bar chart area // Define g for bar chart area

Write Preview
Loading…
Cancel
Save