Skip to content

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

Apply clip path to subchart - #448

parent b52fdaee
Show whitespace changes
Inline Side-by-side
Showing with 18 additions and 4 deletions
c3.js
View file @ c76c8927
...@@ -77,10 +77,12 @@ ...@@ -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 @@ ...@@ -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 @@ ...@@ -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 @@ ...@@ -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 @@ ...@@ -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
......
c3.min.js
View file @ c76c8927
This source diff could not be displayed because it is too large. You can view the blob instead.
src/core.js
View file @ c76c8927
...@@ -72,10 +72,12 @@ c3_chart_internal_fn.initParams = function () { ...@@ -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) { ...@@ -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) { ...@@ -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 () { ...@@ -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);
......
src/subchart.js
View file @ c76c8927
...@@ -19,7 +19,7 @@ c3_chart_internal_fn.initSubchart = function () { ...@@ -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
......
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