Skip to content

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

Fix zoom and redraw on category axis

parent a9f80c4b
Hide whitespace changes
Inline Side-by-side
Showing with 115 additions and 8 deletions
c3.js
View file @ a61e7a79
...@@ -700,7 +700,7 @@ ...@@ -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 @@ ...@@ -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 @@ ...@@ -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;
}; };
......
c3.min.js
View file @ a61e7a79
This source diff could not be displayed because it is too large. You can view the blob instead.
htdocs/index.html
View file @ a61e7a79
...@@ -326,6 +326,9 @@ ...@@ -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 @@ ...@@ -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 @@ ...@@ -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>
......
htdocs/samples/api_data_colors.html 0 → 100644
View file @ a61e7a79
<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>
htdocs/samples/grids.html
View file @ a61e7a79
...@@ -8,6 +8,7 @@ ...@@ -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 @@ ...@@ -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>
htdocs/samples/zoom_category.html 0 → 100644
View file @ a61e7a79
<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>
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