Skip to content

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

Separate clip for chart and grid - #502

parent a69f95ab
Hide whitespace changes
Inline Side-by-side
Showing with 28 additions and 16 deletions
c3.js
View file @ a9219704
......@@ -76,9 +76,11 @@
$$.clipId = "c3-" + (+new Date()) + '-clip',
$$.clipIdForXAxis = $$.clipId + '-xaxis',
$$.clipIdForYAxis = $$.clipId + '-yaxis',
$$.clipIdForGrid = $$.clipId + '-grid',
$$.clipPath = $$.getClipPath($$.clipId),
$$.clipPathForXAxis = $$.getClipPath($$.clipIdForXAxis),
$$.clipPathForYAxis = $$.getClipPath($$.clipIdForYAxis);
$$.clipPathForGrid = $$.getClipPath($$.clipIdForGrid),
$$.dragStart = null;
$$.dragging = false;
......@@ -135,7 +137,7 @@
c3_chart_internal_fn.initWithData = function (data) {
var $$ = this, d3 = $$.d3, config = $$.config;
var main, binding = true;
var defs, main, binding = true;
if ($$.initPie) { $$.initPie(); }
if ($$.initBrush) { $$.initBrush(); }
......@@ -195,10 +197,11 @@
.on('mouseleave', function () { return config.onmouseout.call($$); });
// Define defs
$$.defs = $$.svg.append("defs");
$$.defs.append("clipPath").attr("id", $$.clipId).append("rect");
$$.defs.append("clipPath").attr("id", $$.clipIdForXAxis).append("rect");
$$.defs.append("clipPath").attr("id", $$.clipIdForYAxis).append("rect");
defs = $$.svg.append("defs");
$$.clipChart = $$.appendClip(defs, $$.clipId);
$$.clipXAxis = $$.appendClip(defs, $$.clipIdForXAxis);
$$.clipYAxis = $$.appendClip(defs, $$.clipIdForYAxis);
$$.clipGrid = $$.appendClip(defs, $$.clipIdForGrid);
$$.updateSvgSize();
// Define regions
......@@ -735,7 +738,7 @@
c3_chart_internal_fn.updateSvgSize = function () {
var $$ = this;
$$.svg.attr('width', $$.currentWidth).attr('height', $$.currentHeight);
$$.svg.select('#' + $$.clipId).select('rect')
$$.svg.selectAll(['#' + $$.clipId, '#' + $$.clipIdForGrid]).select('rect')
.attr('width', $$.width)
.attr('height', $$.height);
$$.svg.select('#' + $$.clipIdForXAxis).select('rect')
......@@ -3130,7 +3133,7 @@
c3_chart_internal_fn.initGrid = function () {
var $$ = this, config = $$.config, d3 = $$.d3;
$$.grid = $$.main.append('g')
.attr("clip-path", $$.clipPath)
.attr("clip-path", $$.clipPathForGrid)
.attr('class', CLASS.grid);
if (config.grid_x_show) {
$$.grid.append("g").attr("class", CLASS.xgrids);
......@@ -3150,7 +3153,7 @@
c3_chart_internal_fn.initGridLines = function () {
var $$ = this, d3 = $$.d3;
$$.gridLines = $$.main.append('g')
.attr("clip-path", $$.clipPath)
.attr("clip-path", $$.clipPathForGrid)
.attr('class', CLASS.grid + ' ' + CLASS.gridLines);
$$.gridLines.append('g').attr("class", CLASS.xgridLines);
$$.gridLines.append('g').attr('class', CLASS.ygridLines);
......@@ -4097,6 +4100,9 @@
var isIE9 = window.navigator.appVersion.toLowerCase().indexOf("msie 9.") >= 0;
return "url(" + (isIE9 ? "" : document.URL.split('#')[0]) + "#" + id + ")";
};
c3_chart_internal_fn.appendClip = function (parent, id) {
return parent.append("clipPath").attr("id", id).append("rect");
};
c3_chart_internal_fn.getAxisClipX = function (forHorizontal) {
// axis line width + padding for left
return forHorizontal ? -(1 + 30) : -(this.margin.left - 1);
......
c3.min.js
View file @ a9219704
This source diff could not be displayed because it is too large. You can view the blob instead.
src/clip.js
View file @ a9219704
......@@ -2,6 +2,9 @@ c3_chart_internal_fn.getClipPath = function (id) {
var isIE9 = window.navigator.appVersion.toLowerCase().indexOf("msie 9.") >= 0;
return "url(" + (isIE9 ? "" : document.URL.split('#')[0]) + "#" + id + ")";
};
c3_chart_internal_fn.appendClip = function (parent, id) {
return parent.append("clipPath").attr("id", id).append("rect");
};
c3_chart_internal_fn.getAxisClipX = function (forHorizontal) {
// axis line width + padding for left
return forHorizontal ? -(1 + 30) : -(this.margin.left - 1);
......
src/core.js
View file @ a9219704
......@@ -71,9 +71,11 @@ c3_chart_internal_fn.initParams = function () {
$$.clipId = "c3-" + (+new Date()) + '-clip',
$$.clipIdForXAxis = $$.clipId + '-xaxis',
$$.clipIdForYAxis = $$.clipId + '-yaxis',
$$.clipIdForGrid = $$.clipId + '-grid',
$$.clipPath = $$.getClipPath($$.clipId),
$$.clipPathForXAxis = $$.getClipPath($$.clipIdForXAxis),
$$.clipPathForYAxis = $$.getClipPath($$.clipIdForYAxis);
$$.clipPathForGrid = $$.getClipPath($$.clipIdForGrid),
$$.dragStart = null;
$$.dragging = false;
......@@ -130,7 +132,7 @@ c3_chart_internal_fn.initParams = function () {
c3_chart_internal_fn.initWithData = function (data) {
var $$ = this, d3 = $$.d3, config = $$.config;
var main, binding = true;
var defs, main, binding = true;
if ($$.initPie) { $$.initPie(); }
if ($$.initBrush) { $$.initBrush(); }
......@@ -190,10 +192,11 @@ c3_chart_internal_fn.initWithData = function (data) {
.on('mouseleave', function () { return config.onmouseout.call($$); });
// Define defs
$$.defs = $$.svg.append("defs");
$$.defs.append("clipPath").attr("id", $$.clipId).append("rect");
$$.defs.append("clipPath").attr("id", $$.clipIdForXAxis).append("rect");
$$.defs.append("clipPath").attr("id", $$.clipIdForYAxis).append("rect");
defs = $$.svg.append("defs");
$$.clipChart = $$.appendClip(defs, $$.clipId);
$$.clipXAxis = $$.appendClip(defs, $$.clipIdForXAxis);
$$.clipYAxis = $$.appendClip(defs, $$.clipIdForYAxis);
$$.clipGrid = $$.appendClip(defs, $$.clipIdForGrid);
$$.updateSvgSize();
// Define regions
......@@ -730,7 +733,7 @@ c3_chart_internal_fn.transformAll = function (withTransition, transitions) {
c3_chart_internal_fn.updateSvgSize = function () {
var $$ = this;
$$.svg.attr('width', $$.currentWidth).attr('height', $$.currentHeight);
$$.svg.select('#' + $$.clipId).select('rect')
$$.svg.selectAll(['#' + $$.clipId, '#' + $$.clipIdForGrid]).select('rect')
.attr('width', $$.width)
.attr('height', $$.height);
$$.svg.select('#' + $$.clipIdForXAxis).select('rect')
......
src/grid.js
View file @ a9219704
c3_chart_internal_fn.initGrid = function () {
var $$ = this, config = $$.config, d3 = $$.d3;
$$.grid = $$.main.append('g')
.attr("clip-path", $$.clipPath)
.attr("clip-path", $$.clipPathForGrid)
.attr('class', CLASS.grid);
if (config.grid_x_show) {
$$.grid.append("g").attr("class", CLASS.xgrids);
......@@ -21,7 +21,7 @@ c3_chart_internal_fn.initGrid = function () {
c3_chart_internal_fn.initGridLines = function () {
var $$ = this, d3 = $$.d3;
$$.gridLines = $$.main.append('g')
.attr("clip-path", $$.clipPath)
.attr("clip-path", $$.clipPathForGrid)
.attr('class', CLASS.grid + ' ' + CLASS.gridLines);
$$.gridLines.append('g').attr("class", CLASS.xgridLines);
$$.gridLines.append('g').attr('class', CLASS.ygridLines);
......
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