/
autoAlignLabels.html
111 lines (99 loc) · 3.85 KB
/
autoAlignLabels.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8'>
<title>Auto-aligned axis labels for dc.js Row Chart - Into the Void</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter2/1.3.14/crossfilter.js" type='text/javascript'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dc/2.1.1/dc.min.js" type='text/javascript'></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/dc/2.1.1/dc.min.css" rel='stylesheet' type='text/css'>
</head>
<body>
<div id="rowChartContainer">
</div>
<style type="text/css">
/* Change Font size and color for axis labels */
text.x-axis-label, .y-axis-label {
fill: #777;
font-size: 0.9em;
}
/* Dark font color on bar chart and pie chart */
.dc-chart g.row text {
fill: #2c3e50;
font-size: 0.85em;
pointer-events: inherit;
}
</style>
<script>
// Simple data for demo
var data = [
{fruit: "orange", size: 4},
{fruit: "orange", size: 3},
{fruit: "orange", size: 4},
{fruit: "mango", size: 5},
{fruit: "banana", size: 2},
{fruit: "banana", size: 1},
{fruit: "apple", size: 2},
{fruit: "apple", size: 3},
{fruit: "apple", size: 3}
];
// Setup Crossfilter and dc.js rowChart object
var cf = crossfilter(data);
var fruitDim = cf.dimension(function(d) { return d.fruit; });
var fruitGroup = fruitDim.group(); // Default is to reduce by counts
var rowChartObj = dc.rowChart("#rowChartContainer");
rowChartObj
.width(350)
.height(250)
.dimension(fruitDim)
.group(fruitGroup)
.label(function(d) { return d.key; })
.margins({top: 10, right: 50, bottom: 40, left: 30}) // Add padding to bottom for axis label
.colors(d3.scale.category10())
.labelOffsetX(4)
.elasticX(true)
.xAxis().ticks(5);
// Functions to add x-label & y-label to Row Charts (Unsupported by dc.js)
var addXLabel = function(chartToUpdate, displayText) {
var textSelection = chartToUpdate.svg()
.append("text")
.attr("class", "x-axis-label")
.attr("text-anchor", "middle")
.attr("x", chartToUpdate.width() / 2)
.attr("y", chartToUpdate.height() - 2)
.text(displayText);
var textDims = textSelection.node().getBBox();
var chartMargins = chartToUpdate.margins();
// Dynamically adjust positioning after reading text dimension from DOM
textSelection
.attr("x", chartMargins.left + (chartToUpdate.width()
- chartMargins.left - chartMargins.right) / 2)
.attr("y", chartToUpdate.height() - Math.ceil(textDims.height) / 2);
};
var addYLabel = function(chartToUpdate, displayText) {
var textSelection = chartToUpdate.svg()
.append("text")
.attr("class", "y-axis-label")
.attr("text-anchor", "middle")
.attr("transform", "rotate(-90)")
.attr("x", -chartToUpdate.height() / 2)
.attr("y", 10)
.text(displayText);
var textDims = textSelection.node().getBBox();
var chartMargins = chartToUpdate.margins();
// Dynamically adjust positioning after reading text dimension from DOM
textSelection
.attr("x", -chartMargins.top - (chartToUpdate.height()
- chartMargins.top - chartMargins.bottom) / 2)
.attr("y", Math.max(Math.ceil(textDims.height), chartMargins.left
- Math.ceil(textDims.height) - 5));
};
// Bind addXLabel & addYlabel as callbacks to postRender
rowChartObj.on("postRender", function(chart) {
addXLabel(chart, "Counts");
addYLabel(chart, "Type of Fruit");
});
dc.renderAll();
</script>
</body>
</html>