Commit a61e7a79 authored by Masayuki Tanaka's avatar Masayuki Tanaka

Fix zoom and redraw on category axis

parent a9f80c4b
......@@ -700,7 +700,7 @@
subYMin = __axis_rotated ? 0 : height2;
subYMax = __axis_rotated ? width2 : 1;
// 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());
y2 = getY(yMin, yMax, forInit ? undefined : y2.domain());
subX = getX(xMin, xMax, orgXDomain, function (d) { return d % 1 ? 0 : subXAxis.tickOffset(); });
......@@ -750,11 +750,7 @@
scale[key] = _scale[key];
}
scale.orgDomain = function () {
var domain = _scale.domain();
if (orgXDomain && orgXDomain[0] === domain[0] && orgXDomain[1] < domain[1]) {
domain[1] = orgXDomain[1];
}
return domain;
return _scale.domain();
};
// define custom domain() for categorized axis
if (isCategorized) {
......@@ -763,7 +759,6 @@
domain = this.orgDomain();
return [domain[0], domain[1] + 1];
}
orgXDomain = domain;
_scale.domain(domain);
return scale;
};
......
This source diff could not be displayed because it is too large. You can view the blob instead.
......@@ -326,6 +326,9 @@
<a href="./samples/zoom.html">
Enable zoom
</a>
<a href="./samples/zoom.html">
Zoom on category axis
</a>
<a href="./samples/zoom_reduction.html">
Zoom with reduction
</a>
......@@ -363,7 +366,7 @@
</a>
</div>
<div class="col-md-4">
<h3>grid</h3>
<h3>Grid</h3>
<a href="./samples/api_xgrid_lines.html">
Update x grid lines
</a>
......@@ -392,6 +395,14 @@
</a>
</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>
......
<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>
......@@ -8,6 +8,7 @@
<div id="chart3"></div>
<div id="chart4"></div>
<div id="chart5"></div>
<div id="chart6"></div>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></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>
</body>
</html>
<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