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

Separate clip for chart and grid - #502

pull/590/head
Masayuki Tanaka 10 years ago
parent
a69f95abbc
commit
a9219704a7
5 changed files with 32 additions and 20 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. 22
      c3.js
  2. 8
      c3.min.js
  3. 3
      src/clip.js
  4. 15
      src/core.js
  5. 4
      src/grid.js

22
c3.js
Unescape View File

@ -76,9 +76,11 @@
$$.clipId = "c3-" + (+new Date()) + '-clip', $$.clipId = "c3-" + (+new Date()) + '-clip',
$$.clipIdForXAxis = $$.clipId + '-xaxis', $$.clipIdForXAxis = $$.clipId + '-xaxis',
$$.clipIdForYAxis = $$.clipId + '-yaxis', $$.clipIdForYAxis = $$.clipId + '-yaxis',
$$.clipIdForGrid = $$.clipId + '-grid',
$$.clipPath = $$.getClipPath($$.clipId), $$.clipPath = $$.getClipPath($$.clipId),
$$.clipPathForXAxis = $$.getClipPath($$.clipIdForXAxis), $$.clipPathForXAxis = $$.getClipPath($$.clipIdForXAxis),
$$.clipPathForYAxis = $$.getClipPath($$.clipIdForYAxis); $$.clipPathForYAxis = $$.getClipPath($$.clipIdForYAxis);
$$.clipPathForGrid = $$.getClipPath($$.clipIdForGrid),
$$.dragStart = null; $$.dragStart = null;
$$.dragging = false; $$.dragging = false;
@ -135,7 +137,7 @@
c3_chart_internal_fn.initWithData = function (data) { c3_chart_internal_fn.initWithData = function (data) {
var $$ = this, d3 = $$.d3, config = $$.config; var $$ = this, d3 = $$.d3, config = $$.config;
var main, binding = true; var defs, main, binding = true;
if ($$.initPie) { $$.initPie(); } if ($$.initPie) { $$.initPie(); }
if ($$.initBrush) { $$.initBrush(); } if ($$.initBrush) { $$.initBrush(); }
@ -195,10 +197,11 @@
.on('mouseleave', function () { return config.onmouseout.call($$); }); .on('mouseleave', function () { return config.onmouseout.call($$); });
// Define defs // Define defs
$$.defs = $$.svg.append("defs"); defs = $$.svg.append("defs");
$$.defs.append("clipPath").attr("id", $$.clipId).append("rect"); $$.clipChart = $$.appendClip(defs, $$.clipId);
$$.defs.append("clipPath").attr("id", $$.clipIdForXAxis).append("rect"); $$.clipXAxis = $$.appendClip(defs, $$.clipIdForXAxis);
$$.defs.append("clipPath").attr("id", $$.clipIdForYAxis).append("rect"); $$.clipYAxis = $$.appendClip(defs, $$.clipIdForYAxis);
$$.clipGrid = $$.appendClip(defs, $$.clipIdForGrid);
$$.updateSvgSize(); $$.updateSvgSize();
// Define regions // Define regions
@ -735,7 +738,7 @@
c3_chart_internal_fn.updateSvgSize = function () { c3_chart_internal_fn.updateSvgSize = function () {
var $$ = this; var $$ = this;
$$.svg.attr('width', $$.currentWidth).attr('height', $$.currentHeight); $$.svg.attr('width', $$.currentWidth).attr('height', $$.currentHeight);
$$.svg.select('#' + $$.clipId).select('rect') $$.svg.selectAll(['#' + $$.clipId, '#' + $$.clipIdForGrid]).select('rect')
.attr('width', $$.width) .attr('width', $$.width)
.attr('height', $$.height); .attr('height', $$.height);
$$.svg.select('#' + $$.clipIdForXAxis).select('rect') $$.svg.select('#' + $$.clipIdForXAxis).select('rect')
@ -3130,7 +3133,7 @@
c3_chart_internal_fn.initGrid = function () { c3_chart_internal_fn.initGrid = function () {
var $$ = this, config = $$.config, d3 = $$.d3; var $$ = this, config = $$.config, d3 = $$.d3;
$$.grid = $$.main.append('g') $$.grid = $$.main.append('g')
.attr("clip-path", $$.clipPath) .attr("clip-path", $$.clipPathForGrid)
.attr('class', CLASS.grid); .attr('class', CLASS.grid);
if (config.grid_x_show) { if (config.grid_x_show) {
$$.grid.append("g").attr("class", CLASS.xgrids); $$.grid.append("g").attr("class", CLASS.xgrids);
@ -3150,7 +3153,7 @@
c3_chart_internal_fn.initGridLines = function () { c3_chart_internal_fn.initGridLines = function () {
var $$ = this, d3 = $$.d3; var $$ = this, d3 = $$.d3;
$$.gridLines = $$.main.append('g') $$.gridLines = $$.main.append('g')
.attr("clip-path", $$.clipPath) .attr("clip-path", $$.clipPathForGrid)
.attr('class', CLASS.grid + ' ' + CLASS.gridLines); .attr('class', CLASS.grid + ' ' + CLASS.gridLines);
$$.gridLines.append('g').attr("class", CLASS.xgridLines); $$.gridLines.append('g').attr("class", CLASS.xgridLines);
$$.gridLines.append('g').attr('class', CLASS.ygridLines); $$.gridLines.append('g').attr('class', CLASS.ygridLines);
@ -4097,6 +4100,9 @@
var isIE9 = window.navigator.appVersion.toLowerCase().indexOf("msie 9.") >= 0; var isIE9 = window.navigator.appVersion.toLowerCase().indexOf("msie 9.") >= 0;
return "url(" + (isIE9 ? "" : document.URL.split('#')[0]) + "#" + id + ")"; 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) { c3_chart_internal_fn.getAxisClipX = function (forHorizontal) {
// axis line width + padding for left // axis line width + padding for left
return forHorizontal ? -(1 + 30) : -(this.margin.left - 1); return forHorizontal ? -(1 + 30) : -(this.margin.left - 1);

8
c3.min.js vendored
View File

File diff suppressed because one or more lines are too long

3
src/clip.js
Unescape View File

@ -2,6 +2,9 @@ c3_chart_internal_fn.getClipPath = function (id) {
var isIE9 = window.navigator.appVersion.toLowerCase().indexOf("msie 9.") >= 0; var isIE9 = window.navigator.appVersion.toLowerCase().indexOf("msie 9.") >= 0;
return "url(" + (isIE9 ? "" : document.URL.split('#')[0]) + "#" + id + ")"; 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) { c3_chart_internal_fn.getAxisClipX = function (forHorizontal) {
// axis line width + padding for left // axis line width + padding for left
return forHorizontal ? -(1 + 30) : -(this.margin.left - 1); return forHorizontal ? -(1 + 30) : -(this.margin.left - 1);

15
src/core.js
Unescape View File

@ -71,9 +71,11 @@ c3_chart_internal_fn.initParams = function () {
$$.clipId = "c3-" + (+new Date()) + '-clip', $$.clipId = "c3-" + (+new Date()) + '-clip',
$$.clipIdForXAxis = $$.clipId + '-xaxis', $$.clipIdForXAxis = $$.clipId + '-xaxis',
$$.clipIdForYAxis = $$.clipId + '-yaxis', $$.clipIdForYAxis = $$.clipId + '-yaxis',
$$.clipIdForGrid = $$.clipId + '-grid',
$$.clipPath = $$.getClipPath($$.clipId), $$.clipPath = $$.getClipPath($$.clipId),
$$.clipPathForXAxis = $$.getClipPath($$.clipIdForXAxis), $$.clipPathForXAxis = $$.getClipPath($$.clipIdForXAxis),
$$.clipPathForYAxis = $$.getClipPath($$.clipIdForYAxis); $$.clipPathForYAxis = $$.getClipPath($$.clipIdForYAxis);
$$.clipPathForGrid = $$.getClipPath($$.clipIdForGrid),
$$.dragStart = null; $$.dragStart = null;
$$.dragging = false; $$.dragging = false;
@ -130,7 +132,7 @@ c3_chart_internal_fn.initParams = function () {
c3_chart_internal_fn.initWithData = function (data) { c3_chart_internal_fn.initWithData = function (data) {
var $$ = this, d3 = $$.d3, config = $$.config; var $$ = this, d3 = $$.d3, config = $$.config;
var main, binding = true; var defs, main, binding = true;
if ($$.initPie) { $$.initPie(); } if ($$.initPie) { $$.initPie(); }
if ($$.initBrush) { $$.initBrush(); } if ($$.initBrush) { $$.initBrush(); }
@ -190,10 +192,11 @@ c3_chart_internal_fn.initWithData = function (data) {
.on('mouseleave', function () { return config.onmouseout.call($$); }); .on('mouseleave', function () { return config.onmouseout.call($$); });
// Define defs // Define defs
$$.defs = $$.svg.append("defs"); defs = $$.svg.append("defs");
$$.defs.append("clipPath").attr("id", $$.clipId).append("rect"); $$.clipChart = $$.appendClip(defs, $$.clipId);
$$.defs.append("clipPath").attr("id", $$.clipIdForXAxis).append("rect"); $$.clipXAxis = $$.appendClip(defs, $$.clipIdForXAxis);
$$.defs.append("clipPath").attr("id", $$.clipIdForYAxis).append("rect"); $$.clipYAxis = $$.appendClip(defs, $$.clipIdForYAxis);
$$.clipGrid = $$.appendClip(defs, $$.clipIdForGrid);
$$.updateSvgSize(); $$.updateSvgSize();
// Define regions // Define regions
@ -730,7 +733,7 @@ c3_chart_internal_fn.transformAll = function (withTransition, transitions) {
c3_chart_internal_fn.updateSvgSize = function () { c3_chart_internal_fn.updateSvgSize = function () {
var $$ = this; var $$ = this;
$$.svg.attr('width', $$.currentWidth).attr('height', $$.currentHeight); $$.svg.attr('width', $$.currentWidth).attr('height', $$.currentHeight);
$$.svg.select('#' + $$.clipId).select('rect') $$.svg.selectAll(['#' + $$.clipId, '#' + $$.clipIdForGrid]).select('rect')
.attr('width', $$.width) .attr('width', $$.width)
.attr('height', $$.height); .attr('height', $$.height);
$$.svg.select('#' + $$.clipIdForXAxis).select('rect') $$.svg.select('#' + $$.clipIdForXAxis).select('rect')

4
src/grid.js
Unescape View File

@ -1,7 +1,7 @@
c3_chart_internal_fn.initGrid = function () { c3_chart_internal_fn.initGrid = function () {
var $$ = this, config = $$.config, d3 = $$.d3; var $$ = this, config = $$.config, d3 = $$.d3;
$$.grid = $$.main.append('g') $$.grid = $$.main.append('g')
.attr("clip-path", $$.clipPath) .attr("clip-path", $$.clipPathForGrid)
.attr('class', CLASS.grid); .attr('class', CLASS.grid);
if (config.grid_x_show) { if (config.grid_x_show) {
$$.grid.append("g").attr("class", CLASS.xgrids); $$.grid.append("g").attr("class", CLASS.xgrids);
@ -21,7 +21,7 @@ c3_chart_internal_fn.initGrid = function () {
c3_chart_internal_fn.initGridLines = function () { c3_chart_internal_fn.initGridLines = function () {
var $$ = this, d3 = $$.d3; var $$ = this, d3 = $$.d3;
$$.gridLines = $$.main.append('g') $$.gridLines = $$.main.append('g')
.attr("clip-path", $$.clipPath) .attr("clip-path", $$.clipPathForGrid)
.attr('class', CLASS.grid + ' ' + CLASS.gridLines); .attr('class', CLASS.grid + ' ' + CLASS.gridLines);
$$.gridLines.append('g').attr("class", CLASS.xgridLines); $$.gridLines.append('g').attr("class", CLASS.xgridLines);
$$.gridLines.append('g').attr('class', CLASS.ygridLines); $$.gridLines.append('g').attr('class', CLASS.ygridLines);

Write Preview
Loading…
Cancel
Save