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

Fix zoom and redraw on category axis

pull/340/head
Masayuki Tanaka 11 years ago
parent
a9f80c4bb0
commit
a61e7a7989
6 changed files with 118 additions and 11 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. 9
      c3.js
  2. 6
      c3.min.js
  3. 13
      htdocs/index.html
  4. 33
      htdocs/samples/api_data_colors.html
  5. 21
      htdocs/samples/grids.html
  6. 47
      htdocs/samples/zoom_category.html

9
c3.js
Unescape View File

@ -700,7 +700,7 @@
subYMin = __axis_rotated ? 0 : height2; subYMin = __axis_rotated ? 0 : height2;
subYMax = __axis_rotated ? width2 : 1; subYMax = __axis_rotated ? width2 : 1;
// update scales // update scales
x = getX(xMin, xMax, forInit ? undefined : x.domain(), function () { return xAxis.tickOffset(); }); x = getX(xMin, xMax, forInit ? undefined : x.orgDomain(), function () { return xAxis.tickOffset(); });
y = getY(yMin, yMax, forInit ? undefined : y.domain()); y = getY(yMin, yMax, forInit ? undefined : y.domain());
y2 = getY(yMin, yMax, forInit ? undefined : y2.domain()); y2 = getY(yMin, yMax, forInit ? undefined : y2.domain());
subX = getX(xMin, xMax, orgXDomain, function (d) { return d % 1 ? 0 : subXAxis.tickOffset(); }); subX = getX(xMin, xMax, orgXDomain, function (d) { return d % 1 ? 0 : subXAxis.tickOffset(); });
@ -750,11 +750,7 @@
scale[key] = _scale[key]; scale[key] = _scale[key];
} }
scale.orgDomain = function () { scale.orgDomain = function () {
var domain = _scale.domain(); return _scale.domain();
if (orgXDomain && orgXDomain[0] === domain[0] && orgXDomain[1] < domain[1]) {
domain[1] = orgXDomain[1];
}
return domain;
}; };
// define custom domain() for categorized axis // define custom domain() for categorized axis
if (isCategorized) { if (isCategorized) {
@ -763,7 +759,6 @@
domain = this.orgDomain(); domain = this.orgDomain();
return [domain[0], domain[1] + 1]; return [domain[0], domain[1] + 1];
} }
orgXDomain = domain;
_scale.domain(domain); _scale.domain(domain);
return scale; return scale;
}; };

6
c3.min.js vendored
View File

File diff suppressed because one or more lines are too long

13
htdocs/index.html
Unescape View File

@ -326,6 +326,9 @@
<a href="./samples/zoom.html"> <a href="./samples/zoom.html">
Enable zoom Enable zoom
</a> </a>
<a href="./samples/zoom.html">
Zoom on category axis
</a>
<a href="./samples/zoom_reduction.html"> <a href="./samples/zoom_reduction.html">
Zoom with reduction Zoom with reduction
</a> </a>
@ -363,7 +366,7 @@
</a> </a>
</div> </div>
<div class="col-md-4"> <div class="col-md-4">
<h3>grid</h3> <h3>Grid</h3>
<a href="./samples/api_xgrid_lines.html"> <a href="./samples/api_xgrid_lines.html">
Update x grid lines Update x grid lines
</a> </a>
@ -392,6 +395,14 @@
</a> </a>
</div> </div>
</div> </div>
<div class="row">
<div class="col-md-4">
<h3>Data</h3>
<a href="./samples/api_data_colors.html">
Update data color
</a>
</div>
</div>
</div> </div>
</div> </div>

33
htdocs/samples/api_data_colors.html
Unescape View File

@ -0,0 +1,33 @@
<html>
<head>
<link rel="stylesheet" type="text/css" href="/css/c3.css">
</head>
<body>
<div id="chart"></div>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="/js/c3.js"></script>
<script>
var chart = c3.generate({
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 50, 20, 10, 40, 15, 25]
],
},
axis: {
x: {
type: 'category'
}
}
});
setTimeout(function () {
chart.data.colors({data1: '#000'});
}, 1000);
</script>
</body>
</html>

21
htdocs/samples/grids.html
Unescape View File

@ -8,6 +8,7 @@
<div id="chart3"></div> <div id="chart3"></div>
<div id="chart4"></div> <div id="chart4"></div>
<div id="chart5"></div> <div id="chart5"></div>
<div id="chart6"></div>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="/js/c3.js"></script> <script src="/js/c3.js"></script>
@ -85,6 +86,26 @@
} }
}); });
c3.generate({
bindto: '#chart6',
data: {
columns: bigData
},
axis: {
x: {
type: 'category'
}
},
grid: {
x: {
show: true
},
y: {
show: true
}
}
});
</script> </script>
</body> </body>
</html> </html>

47
htdocs/samples/zoom_category.html
Unescape View File

@ -0,0 +1,47 @@
<html>
<head>
<link rel="stylesheet" type="text/css" href="/css/c3.css">
</head>
<body>
<div id="chart"></div>
<button onclick="load()">Load</button>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="/js/c3.js"></script>
<script>
var chart = c3.generate({
bindto: '#chart',
data: {
columns: [
generateData(100)
],
},
axis: {
x: {
type: 'category'
}
},
zoom: { enabled: true },
subchart: { show: true }
});
function load() {
chart.load({
columns: [
generateData(Math.random() * 1000)
],
});
}
function generateData(n) {
var column = ['sample'];
for (var i = 0; i < n; i++) {
column.push(Math.random() * 500);
}
return column;
}
</script>
</body>
</html>
Write Preview
Loading…
Cancel
Save