example/debug.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>d3.compose - Debug</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/default.css">
<link rel="stylesheet" type="text/css" href="../.tmp/d3.compose.css">
<style>
.container {
margin: 40px auto 0;
}
@media (min-width: 768px) {
#chart {
width: 600px;
margin-bottom: 10px;
}
.container {
width: 900px;
}
}
</style>
</head>
<body>
<div class="container">
<div id="chart"></div>
<p>Tests:</p>
<ul>
<li><a class="js-add-chart" href="#">Add Chart</a></li>
<li><a class="js-change-chart" href="#">Change Chart</a></li>
<li><a class="js-remove-chart" href="#">Remove Chart</a></li>
<li><a class="js-add-component" href="#">Add Component</a></li>
<li><a class="js-change-component" href="#">Change Component</a></li>
<li><a class="js-move-component" href="#">Move Component</a></li>
<li><a class="js-remove-component" href="#">Remove Component</a></li>
<li><a class="js-change-data" href="#">Change Data</a></li>
</ul>
<ul class="js-mouse">
<li>Container: <span class="js-mouse-container"></span></li>
<li>Chart: <span class="js-mouse-chart"></span></li>
</ul>
</div>
<script src="../node_modules/d3/d3.js"></script>
<script src="../node_modules/d3.chart/d3.chart.js"></script>
<script src="../.tmp/d3.compose.js"></script>
<script src="../node_modules/jquery/dist/jquery.js"></script>
<script type="text/javascript">
var chart = d3.select('#chart').chart('Compose').width(600).height(400);
var config = {charts: {}, components: {}};
var utils = d3.compose.utils;
var data = {
increasing: [
{key: 'a', name: 'A', values: [1, 2, 3, 4, 5]},
{key: 'b', name: 'B', values: [2, 4, 6, 8, 10]}
],
decreasing: [
{key: 'c', name: 'C', values: [5, 4, 3, 2, 1]},
{key: 'd', name: 'D', values: [10, 8, 6, 4, 2]}
]
};
function draw(options) {
options = options || {};
chart.options(function(data) {
var scales = {
x: {type: 'ordinal', data: data.increasing, value: function(d, i) { return i; }},
y: {data: data.increasing.concat(data.decreasing), value: function(d, i) { return d; }}
};
config.charts.lines = d3c.lines('lines', {data: data.increasing, xScale: scales.x, yScale: scales.y, labels: true});
var bars = d3c.bars('chart_2', {data: data.decreasing, xScale: utils.extend({adjacent: true}, scales.x), yScale: scales.y, labels: true});
var lines2 = d3c.lines('chart_2', {data: data.decreasing, xScale: scales.x, yScale: scales.y, labels: true});
if (options.charts == 'remove') {
delete config.charts.bars;
delete config.charts.lines2;
}
else if (options.charts == 'add') {
config.charts.bars = bars;
delete config.charts.lines2;
}
else if (options.charts == 'change') {
delete config.charts.bars;
config.charts.lines2 = lines2;
}
else if (config.charts.bars) {
config.charts.bars = bars;
}
else if (config.charts.lines2) {
config.charts.lines2 = lines2;
}
config.components.yAxis = yAxis = d3c.axis('axis', {scale: scales.y, delay: 250, duration: 750});
var legend = d3c.legend('component_2', {charts: ['lines', 'chart_2']});
var bottomXAxis = d3c.axis('component_2', {scale: scales.x});
var topXAxis = d3c.axis('component_2', {scale: scales.x, gridlines: true});
if (options.components == 'remove') {
delete config.components.legend;
delete config.components.bottomXAxis;
delete config.components.topXAxis;
}
else if (options.components == 'add') {
config.components.legend = legend;
delete config.components.bottomXAxis;
delete config.components.topXAxis;
}
else if (options.components == 'change') {
delete config.components.legend;
config.components.bottomXAxis = bottomXAxis;
delete config.components.topXAxis;
}
else if (options.components == 'move') {
delete config.components.legend;
delete config.components.bottomXAxis;
config.components.topXAxis = topXAxis;
config.components.yAxis.gridlines = true;
}
return [
config.components.topXAxis,
[
config.components.yAxis, d3c.layered([
config.charts.lines,
config.charts.bars,
config.charts.lines2
]),
config.components.legend
],
config.components.bottomXAxis
];
});
chart.draw(data);
}
draw();
$('.js-add-chart').on('click', function addChart(e) {
e.preventDefault();
draw({charts: 'add'});
});
$('.js-change-chart').on('click', function changeChart(e) {
e.preventDefault();
draw({charts: 'change'});
});
$('.js-remove-chart').on('click', function removeChart(e) {
e.preventDefault();
draw({charts: 'remove'});
});
$('.js-add-component').on('click', function addComponent(e) {
e.preventDefault();
draw({components: 'add'});
});
$('.js-change-component').on('click', function changeComponent(e) {
e.preventDefault();
draw({components: 'change'});
});
$('.js-move-component').on('click', function moveComponent(e) {
e.preventDefault();
draw({components: 'move'});
});
$('.js-remove-component').on('click', function removeComponent(e) {
e.preventDefault();
draw({components: 'remove'});
});
$('.js-change-data').on('click', function changeData(e) {
e.preventDefault();
var count = Math.round(Math.random() * 5 + 5);
utils.objectEach(data, function(set, key) {
set.forEach(function(series) {
series.values = [];
for (var i = 0; i < count; i++) {
series.values.push(Math.round(Math.random() * 25));
}
});
});
draw();
})
// Mouse debugging
chart.on('mouseenter', function(position) {
$('.js-mouse-container').text(positionToString(position.container));
$('.js-mouse-chart').text(positionToString(position.chart));
});
chart.on('mousemove', function(position) {
$('.js-mouse-container').text(positionToString(position.container));
$('.js-mouse-chart').text(positionToString(position.chart));
});
chart.on('mouseleave', function() {
$('.js-mouse-container').text('');
$('.js-mouse-chart').text('');
});
chart.on('mouseenter:point', function(point) {
$('.js-mouse').append('<li data-point="' + point.key + point.meta.chart.id + '">(' + point.d.x + ', ' + point.d.y + ') ' + point.key + '</li>');
});
chart.on('mouseleave:point', function(point) {
$('.js-mouse [data-point="' + point.key + point.meta.chart.id + '"]').remove();
});
function positionToString(position) {
return '(' + position.x + ', ' + position.y + ')';
}
</script>
</body>
</html>