/
index.html
118 lines (103 loc) · 3.61 KB
/
index.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
112
113
114
115
116
117
118
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>d3-multiline-text plugin examples</title>
</head>
<body>
<h1>d3-multiline-text plugin examples</h1>
The plugin source is hosted at <a href="https://github.com/hnakamur/d3-multiline-text-plugin">https://github.com/hnakamur/d3-multiline-text-plugin</a>.
<h2>Common example (multiple texts with the same alignments)</h2>
<div id='commonExample'></div>
<h2>Alignment patterns</h2>
<div id='alignExample'></div>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.10/d3.min.js"></script>
<script src="multiline-text.js"></script>
<script>
createCommonExample();
createAlignExample();
function createCommonExample() {
var frameWidth = 680;
var frameHeight = 84;
var svg = d3.select("#commonExample").append("svg")
.attr({
width: frameWidth,
height: frameHeight
});
var rects = [
{x: 20, y: 2, w: 200, h: 80, text: 'This is a common\nexample.'},
{x: 240, y: 2, w: 200, h: 80, text: 'The same alignments\nin these text blocks'},
{x: 460, y: 2, w: 200, h: 80, text: 'verticalAlign: center\nhorizontaiAlign: left'}
];
var g = svg.selectAll('g.block')
.data(rects).enter().append('g')
.attr({
class: 'block',
transform: function(d) {
return "translate(" + d.x + "," + d.y + ")";
},
});
g.append('rect')
.attr({
'width': function(d) { return d.w; },
'height': function(d) { return d.h; },
'fill': 'none',
'stroke': '#00C9F9',
'stroke-width': 1
});
g.append('text').call(d3.multilineText().verticalAlign('center').horizontalAlign('left'));
}
function createAlignExample() {
var frameWidth = 680;
var frameHeight = 284;
var svg = d3.select("#alignExample").append("svg")
.attr({
width: frameWidth,
height: frameHeight
});
var rects = [
{x: 20, y: 2, w: 200, h: 80, text: 'verticalAlign: top\nhorizontaiAlign: left',
vAlign: 'top', hAlign: 'left'},
{x: 240, y: 2, w: 200, h: 80, text: 'verticalAlign: top\nhorizontaiAlign: center',
vAlign: 'top', hAlign: 'center'},
{x: 460, y: 2, w: 200, h: 80, text: 'verticalAlign: top\nhorizontaiAlign: right',
vAlign: 'top', hAlign: 'right'},
{x: 20, y: 102, w: 200, h: 80, text: 'verticalAlign: center\nhorizontaiAlign: left',
vAlign: 'center', hAlign: 'left'},
{x: 240, y: 102, w: 200, h: 80, text: 'verticalAlign: center\nhorizontaiAlign: center',
vAlign: 'center', hAlign: 'center'},
{x: 460, y: 102, w: 200, h: 80, text: 'verticalAlign: center\nhorizontaiAlign: right',
vAlign: 'center', hAlign: 'right'},
{x: 20, y: 202, w: 200, h: 80, text: 'verticalAlign: bottom\nhorizontaiAlign: left',
vAlign: 'bottom', hAlign: 'left'},
{x: 240, y: 202, w: 200, h: 80, text: 'verticalAlign: bottom\nhorizontaiAlign: center',
vAlign: 'bottom', hAlign: 'center'},
{x: 460, y: 202, w: 200, h: 80, text: 'verticalAlign: bottom\nhorizontaiAlign: right',
vAlign: 'bottom', hAlign: 'right'}
];
var g = svg.selectAll('g.block')
.data(rects).enter().append('g')
.attr({
class: 'block',
transform: function(d) {
return "translate(" + d.x + "," + d.y + ")";
},
});
g.append('rect')
.attr({
'width': function(d) { return d.w; },
'height': function(d) { return d.h; },
'fill': 'none',
'stroke': '#00C9F9',
'stroke-width': 1
});
function align(selection) {
selection.each(function(d, i) {
var text = d3.select(this);
text.call(d3.multilineText().verticalAlign(d.vAlign).horizontalAlign(d.hAlign));
});
}
g.append('text').call(align);
}
</script>
</body>
</html>