回答編集履歴
5
調整
answer
CHANGED
|
@@ -87,60 +87,8 @@
|
|
|
87
87
|
```
|
|
88
88
|
|
|
89
89
|
# ついで
|
|
90
|
-
すべてJSで処理する場合はsvgはNSで処理しないといけないので注意
|
|
91
|
-
```javascript
|
|
92
|
-
数直線４
|
|
93
|
-
<script>
|
|
94
|
-
window.addEventListener('DOMContentLoaded', function(e){
|
|
95
|
-
var svg= document.createElementNS('http://www.w3.org/2000/svg', 'svg');
|
|
96
|
-
svg.setAttribute("id","svg-id");
|
|
97
|
-
svg.setAttribute("width","210");
|
|
98
|
-
svg.setAttribute("height","300");
|
|
99
|
-
document.querySelector('body').appendChild(svg);
|
|
100
|
-
|
|
101
|
-
var x=10,y=30; //初期座標
|
|
102
|
-
var offset_x =10; //目盛幅
|
|
103
|
-
var offset_y = 0; //目盛高さ（変動）
|
|
104
|
-
var small_scale = 5; //目盛高さ（小）
|
|
105
|
-
var big_scale =10; //目盛高さ（大）
|
|
106
|
-
var big_scale_at = 5; //大目盛頻度
|
|
107
|
-
var big_scale_from = 0; //大目盛開始位置
|
|
108
|
-
var count =20; //回数
|
|
109
|
-
var p=[];
|
|
110
|
-
p.push([x,y]);
|
|
111
|
-
for(var i=0;i<count;i++){
|
|
112
|
-
offset_y=(i-big_scale_from)%big_scale_at?small_scale:big_scale;
|
|
113
|
-
p.push([x,y]);
|
|
114
|
-
y-=offset_y
|
|
115
|
-
p.push([x,y]);
|
|
116
|
-
y+=offset_y
|
|
117
|
-
p.push([x,y]);
|
|
118
|
-
|
|
90
|
+
※文字数の関係で一部削除
|
|
119
|
-
}
|
|
120
|
-
var pl= document.createElementNS('http://www.w3.org/2000/svg', 'polyline');
|
|
121
|
-
pl.setAttribute("id","numberLine");
|
|
122
|
-
pl.setAttribute("stroke","black");
|
|
123
|
-
pl.setAttribute("fill","none");
|
|
124
|
-
document.querySelector("#svg-id").appendChild(pl);
|
|
125
91
|
|
|
126
|
-
var point=document.querySelector("#svg-id").createSVGPoint();
|
|
127
|
-
p.forEach(function(n){
|
|
128
|
-
point.x = n[0];
|
|
129
|
-
point.y = n[1];
|
|
130
|
-
document.querySelector("#numberLine").points.appendItem(point);
|
|
131
|
-
});
|
|
132
|
-
var texts=[["0",5,15],["5",55,15],["10",100,15],["15",150,15]];
|
|
133
|
-
texts.forEach(function(x){
|
|
134
|
-
var t= document.createElementNS('http://www.w3.org/2000/svg', 'text');
|
|
135
|
-
t.textContent=x[0];
|
|
136
|
-
t.setAttribute("x",x[1]);
|
|
137
|
-
t.setAttribute("y",x[2]);
|
|
138
|
-
document.querySelector("#svg-id").appendChild(t);
|
|
139
|
-
});
|
|
140
|
-
});
|
|
141
|
-
</script>
|
|
142
|
-
```
|
|
143
|
-
|
|
144
92
|
# 任意に数値を指定する方法
|
|
145
93
|
やや複雑になってきていますが、ついてきていますか？
|
|
146
94
|
|
|
@@ -220,4 +168,100 @@
|
|
|
220
168
|
<input type="button" id="draw" value="draw"><hr>
|
|
221
169
|
</div>
|
|
222
170
|
<svg id="svg1" width=800 height=300></svg>
|
|
171
|
+
```
|
|
172
|
+
|
|
173
|
+
# 初期表示＆入力するたびに数直線が変化
|
|
174
|
+
|
|
175
|
+
```javascript
|
|
176
|
+
<script>
|
|
177
|
+
[NodeList,HTMLCollection].forEach(function(x){
|
|
178
|
+
x.prototype.addEventListener=function(eventStr,callback){
|
|
179
|
+
[].forEach.call(this,function(x){
|
|
180
|
+
x.addEventListener(eventStr,callback);
|
|
181
|
+
});
|
|
182
|
+
};
|
|
183
|
+
});
|
|
184
|
+
HTMLElement.prototype.trigger=function(eventStr){
|
|
185
|
+
if (document.createEvent) {
|
|
186
|
+
var e = document.createEvent("HTMLEvents");
|
|
187
|
+
e.initEvent(eventStr, true, true );
|
|
188
|
+
return this.dispatchEvent(e);
|
|
189
|
+
} else {
|
|
190
|
+
var e = document.createEventObject();
|
|
191
|
+
return this.fireEvent("on"+eventStr, e);
|
|
192
|
+
}
|
|
193
|
+
};
|
|
194
|
+
window.addEventListener('DOMContentLoaded', function(e){
|
|
195
|
+
document.querySelectorAll('#input input').addEventListener('change',function(){
|
|
196
|
+
var svg1 = document.querySelector("#svg1");
|
|
197
|
+
var init_x = parseInt(document.querySelector('#x').value);
|
|
198
|
+
var init_y = parseInt(document.querySelector('#y').value);
|
|
199
|
+
var position_x = init_x;
|
|
200
|
+
var position_y = init_y;
|
|
201
|
+
var offset_x = parseInt(document.querySelector('#range_width').value);
|
|
202
|
+
var offset_y = 0;
|
|
203
|
+
var small_scale = parseInt(document.querySelector('#small_scale').value);
|
|
204
|
+
var big_scale = parseInt(document.querySelector('#big_scale').value);
|
|
205
|
+
var big_scale_at = parseInt(document.querySelector('#big_scale_at').value);
|
|
206
|
+
var big_scale_from = parseInt(document.querySelector('#big_scale_from').value);
|
|
207
|
+
var count = parseInt(document.querySelector('#count').value);
|
|
208
|
+
var start_num = parseInt(document.querySelector('#start_num').value);
|
|
209
|
+
var add_num = parseInt(document.querySelector('#add_num').value);
|
|
210
|
+
|
|
211
|
+
/* 初期化 */
|
|
212
|
+
[].forEach.call(svg1.querySelectorAll("*"),function(x){x.parentNode.removeChild(x);});
|
|
213
|
+
|
|
214
|
+
var p=[];
|
|
215
|
+
p.push([position_x,position_y]);
|
|
216
|
+
for(var i=0;i<count;i++){
|
|
217
|
+
offset_y=(i-big_scale_from)%big_scale_at?small_scale:big_scale;
|
|
218
|
+
p.push([position_x,position_y]);
|
|
219
|
+
position_y-=offset_y;
|
|
220
|
+
p.push([position_x,position_y]);
|
|
221
|
+
position_y+=offset_y;
|
|
222
|
+
p.push([position_x,position_y]);
|
|
223
|
+
position_x+=offset_x;
|
|
224
|
+
}
|
|
225
|
+
var pl= document.createElementNS('http://www.w3.org/2000/svg', 'polyline');
|
|
226
|
+
pl.setAttribute("id","numberLine");
|
|
227
|
+
pl.setAttribute("stroke","black");
|
|
228
|
+
pl.setAttribute("fill","none");
|
|
229
|
+
svg1.appendChild(pl);
|
|
230
|
+
|
|
231
|
+
var point=svg1.createSVGPoint();
|
|
232
|
+
p.forEach(function(n){
|
|
233
|
+
point.x = n[0];
|
|
234
|
+
point.y = n[1];
|
|
235
|
+
document.querySelector("#numberLine").points.appendItem(point);
|
|
236
|
+
});
|
|
237
|
+
var texts=[];
|
|
238
|
+
var adjust_num_y = 2;
|
|
239
|
+
var num=start_num;
|
|
240
|
+
for(var i=big_scale_from;i<count;i+=big_scale_at){
|
|
241
|
+
var adjust_num_x = num.toString().length*5;
|
|
242
|
+
texts.push([num,init_x+offset_x*i-adjust_num_x,init_y-big_scale-adjust_num_y]);
|
|
243
|
+
num+=big_scale_at*add_num;
|
|
244
|
+
}
|
|
245
|
+
texts.forEach(function(x){
|
|
246
|
+
var t= document.createElementNS('http://www.w3.org/2000/svg', 'text');
|
|
247
|
+
t.setAttribute("id","text");
|
|
248
|
+
t.textContent=x[0];
|
|
249
|
+
t.setAttribute("x",x[1]);
|
|
250
|
+
t.setAttribute("y",x[2]);
|
|
251
|
+
svg1.appendChild(t);
|
|
252
|
+
});
|
|
253
|
+
});
|
|
254
|
+
document.querySelector('#input input').trigger('change');
|
|
255
|
+
});
|
|
256
|
+
</script>
|
|
257
|
+
|
|
258
|
+
<div id="input">
|
|
259
|
+
数直線の位置 X:<input type="text" id="x" value="150" size="2"> Y:<input type="text" id="y" value="150" size="2"><br>
|
|
260
|
+
目盛り幅:<input type="text" id="range_width" value="30" size="2"><br>
|
|
261
|
+
目盛り高さ 小:<input type="text" id="small_scale" value="5" size="2"> 大:<input type="text" id="big_scale" value="10" size="2"><br>
|
|
262
|
+
大目盛り 頻度:<input type="text" id="big_scale_at" value="5" size="2"> 開始位置:<input type="text" id="big_scale_from" value="0" size="2"><br>
|
|
263
|
+
回数:<input type="text" id="count" value="20" size="2"><br>
|
|
264
|
+
数値 開始:<input type="text" id="start_num" value="0" size="2"> 増加:<input type="text" id="add_num" value="1" size="2"><br>
|
|
265
|
+
</div>
|
|
266
|
+
<svg id="svg1" width=800 height=300></svg>
|
|
223
267
|
```
|
4
修正
answer
CHANGED
|
@@ -195,7 +195,7 @@
|
|
|
195
195
|
for(var i=big_scale_from;i<count;i+=big_scale_at){
|
|
196
196
|
var adjust_num_x = num.toString().length*5;
|
|
197
197
|
texts.push([num,init_x+offset_x*i-adjust_num_x,init_y-big_scale-adjust_num_y]);
|
|
198
|
-
num+=big_scale_at;
|
|
198
|
+
num+=big_scale_at*add_num;
|
|
199
199
|
}
|
|
200
200
|
texts.forEach(function(x){
|
|
201
201
|
var t= document.createElementNS('http://www.w3.org/2000/svg', 'text');
|
3
調整
answer
CHANGED
|
@@ -139,4 +139,85 @@
|
|
|
139
139
|
});
|
|
140
140
|
});
|
|
141
141
|
</script>
|
|
142
|
+
```
|
|
143
|
+
|
|
144
|
+
# 任意に数値を指定する方法
|
|
145
|
+
やや複雑になってきていますが、ついてきていますか？
|
|
146
|
+
|
|
147
|
+
```javascript
|
|
148
|
+
<script>
|
|
149
|
+
window.addEventListener('DOMContentLoaded', function(e){
|
|
150
|
+
document.querySelector('#draw').addEventListener('click',function(e){
|
|
151
|
+
var svg1 = document.querySelector("#svg1");
|
|
152
|
+
var init_x = parseInt(document.querySelector('#x').value);
|
|
153
|
+
var init_y = parseInt(document.querySelector('#y').value);
|
|
154
|
+
var position_x = init_x;
|
|
155
|
+
var position_y = init_y;
|
|
156
|
+
var offset_x = parseInt(document.querySelector('#range_width').value);
|
|
157
|
+
var offset_y = 0;
|
|
158
|
+
var small_scale = parseInt(document.querySelector('#small_scale').value);
|
|
159
|
+
var big_scale = parseInt(document.querySelector('#big_scale').value);
|
|
160
|
+
var big_scale_at = parseInt(document.querySelector('#big_scale_at').value);
|
|
161
|
+
var big_scale_from = parseInt(document.querySelector('#big_scale_from').value);
|
|
162
|
+
var count = parseInt(document.querySelector('#count').value);
|
|
163
|
+
var start_num = parseInt(document.querySelector('#start_num').value);
|
|
164
|
+
var add_num = parseInt(document.querySelector('#add_num').value);
|
|
165
|
+
|
|
166
|
+
/* 初期化 */
|
|
167
|
+
[].forEach.call(svg1.querySelectorAll("*"),function(x){x.parentNode.removeChild(x);});
|
|
168
|
+
|
|
169
|
+
var p=[];
|
|
170
|
+
p.push([position_x,position_y]);
|
|
171
|
+
for(var i=0;i<count;i++){
|
|
172
|
+
offset_y=(i-big_scale_from)%big_scale_at?small_scale:big_scale;
|
|
173
|
+
p.push([position_x,position_y]);
|
|
174
|
+
position_y-=offset_y
|
|
175
|
+
p.push([position_x,position_y]);
|
|
176
|
+
position_y+=offset_y
|
|
177
|
+
p.push([position_x,position_y]);
|
|
178
|
+
position_x+=offset_x;
|
|
179
|
+
}
|
|
180
|
+
var pl= document.createElementNS('http://www.w3.org/2000/svg', 'polyline');
|
|
181
|
+
pl.setAttribute("id","numberLine");
|
|
182
|
+
pl.setAttribute("stroke","black");
|
|
183
|
+
pl.setAttribute("fill","none");
|
|
184
|
+
svg1.appendChild(pl);
|
|
185
|
+
|
|
186
|
+
var point=svg1.createSVGPoint();
|
|
187
|
+
p.forEach(function(n){
|
|
188
|
+
point.x = n[0];
|
|
189
|
+
point.y = n[1];
|
|
190
|
+
document.querySelector("#numberLine").points.appendItem(point);
|
|
191
|
+
});
|
|
192
|
+
var texts=[];
|
|
193
|
+
var adjust_num_y = 2;
|
|
194
|
+
var num=start_num;
|
|
195
|
+
for(var i=big_scale_from;i<count;i+=big_scale_at){
|
|
196
|
+
var adjust_num_x = num.toString().length*5;
|
|
197
|
+
texts.push([num,init_x+offset_x*i-adjust_num_x,init_y-big_scale-adjust_num_y]);
|
|
198
|
+
num+=big_scale_at;
|
|
199
|
+
}
|
|
200
|
+
texts.forEach(function(x){
|
|
201
|
+
var t= document.createElementNS('http://www.w3.org/2000/svg', 'text');
|
|
202
|
+
t.setAttribute("id","text");
|
|
203
|
+
t.textContent=x[0];
|
|
204
|
+
t.setAttribute("x",x[1]);
|
|
205
|
+
t.setAttribute("y",x[2]);
|
|
206
|
+
svg1.appendChild(t);
|
|
207
|
+
});
|
|
208
|
+
});
|
|
209
|
+
});
|
|
210
|
+
|
|
211
|
+
</script>
|
|
212
|
+
|
|
213
|
+
<div id="input">
|
|
214
|
+
数直線の位置 X:<input type="text" id="x" value="150" size="2"> Y:<input type="text" id="y" value="150" size="2"><br>
|
|
215
|
+
目盛り幅:<input type="text" id="range_width" value="30" size="2"><br>
|
|
216
|
+
目盛り高さ 小:<input type="text" id="small_scale" value="5" size="2"> 大:<input type="text" id="big_scale" value="10" size="2"><br>
|
|
217
|
+
大目盛り 頻度:<input type="text" id="big_scale_at" value="5" size="2"> 開始位置:<input type="text" id="big_scale_from" value="0" size="2"><br>
|
|
218
|
+
回数:<input type="text" id="count" value="20" size="2"><br>
|
|
219
|
+
数値 開始:<input type="text" id="start_num" value="0" size="2"> 増加:<input type="text" id="add_num" value="1" size="2"><br>
|
|
220
|
+
<input type="button" id="draw" value="draw"><hr>
|
|
221
|
+
</div>
|
|
222
|
+
<svg id="svg1" width=800 height=300></svg>
|
|
142
223
|
```
|
2
ついで
answer
CHANGED
|
@@ -84,4 +84,59 @@
|
|
|
84
84
|
<text x="100" y="15">10</text>
|
|
85
85
|
<text x="150" y="15">15</text>
|
|
86
86
|
</svg>
|
|
87
|
+
```
|
|
88
|
+
|
|
89
|
+
# ついで
|
|
90
|
+
すべてJSで処理する場合はsvgはNSで処理しないといけないので注意
|
|
91
|
+
```javascript
|
|
92
|
+
数直線４
|
|
93
|
+
<script>
|
|
94
|
+
window.addEventListener('DOMContentLoaded', function(e){
|
|
95
|
+
var svg= document.createElementNS('http://www.w3.org/2000/svg', 'svg');
|
|
96
|
+
svg.setAttribute("id","svg-id");
|
|
97
|
+
svg.setAttribute("width","210");
|
|
98
|
+
svg.setAttribute("height","300");
|
|
99
|
+
document.querySelector('body').appendChild(svg);
|
|
100
|
+
|
|
101
|
+
var x=10,y=30; //初期座標
|
|
102
|
+
var offset_x =10; //目盛幅
|
|
103
|
+
var offset_y = 0; //目盛高さ（変動）
|
|
104
|
+
var small_scale = 5; //目盛高さ（小）
|
|
105
|
+
var big_scale =10; //目盛高さ（大）
|
|
106
|
+
var big_scale_at = 5; //大目盛頻度
|
|
107
|
+
var big_scale_from = 0; //大目盛開始位置
|
|
108
|
+
var count =20; //回数
|
|
109
|
+
var p=[];
|
|
110
|
+
p.push([x,y]);
|
|
111
|
+
for(var i=0;i<count;i++){
|
|
112
|
+
offset_y=(i-big_scale_from)%big_scale_at?small_scale:big_scale;
|
|
113
|
+
p.push([x,y]);
|
|
114
|
+
y-=offset_y
|
|
115
|
+
p.push([x,y]);
|
|
116
|
+
y+=offset_y
|
|
117
|
+
p.push([x,y]);
|
|
118
|
+
x+=offset_x;
|
|
119
|
+
}
|
|
120
|
+
var pl= document.createElementNS('http://www.w3.org/2000/svg', 'polyline');
|
|
121
|
+
pl.setAttribute("id","numberLine");
|
|
122
|
+
pl.setAttribute("stroke","black");
|
|
123
|
+
pl.setAttribute("fill","none");
|
|
124
|
+
document.querySelector("#svg-id").appendChild(pl);
|
|
125
|
+
|
|
126
|
+
var point=document.querySelector("#svg-id").createSVGPoint();
|
|
127
|
+
p.forEach(function(n){
|
|
128
|
+
point.x = n[0];
|
|
129
|
+
point.y = n[1];
|
|
130
|
+
document.querySelector("#numberLine").points.appendItem(point);
|
|
131
|
+
});
|
|
132
|
+
var texts=[["0",5,15],["5",55,15],["10",100,15],["15",150,15]];
|
|
133
|
+
texts.forEach(function(x){
|
|
134
|
+
var t= document.createElementNS('http://www.w3.org/2000/svg', 'text');
|
|
135
|
+
t.textContent=x[0];
|
|
136
|
+
t.setAttribute("x",x[1]);
|
|
137
|
+
t.setAttribute("y",x[2]);
|
|
138
|
+
document.querySelector("#svg-id").appendChild(t);
|
|
139
|
+
});
|
|
140
|
+
});
|
|
141
|
+
</script>
|
|
87
142
|
```
|
1
まとめ
answer
CHANGED
|
@@ -43,4 +43,45 @@
|
|
|
43
43
|
<text x="100" y="15">10</text>
|
|
44
44
|
<text x="150" y="15">15</text>
|
|
45
45
|
</svg>
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
# まとめ
|
|
49
|
+
上記をまとめるとこんな感じ？
|
|
50
|
+
```javascript
|
|
51
|
+
<script>
|
|
52
|
+
window.addEventListener('DOMContentLoaded', function(e){
|
|
53
|
+
var x=10,y=30; //初期座標
|
|
54
|
+
var range_width =10; //目盛幅
|
|
55
|
+
var small_scale = 5; //目盛高さ（小）
|
|
56
|
+
var big_scale =10; //目盛高さ（大）
|
|
57
|
+
var big_scale_at = 5; //大目盛頻度
|
|
58
|
+
var big_scale_from = 0; //大目盛開始位置
|
|
59
|
+
var count =20; //回数
|
|
60
|
+
var p=[];
|
|
61
|
+
var offset=0;
|
|
62
|
+
p.push([x,y]);
|
|
63
|
+
for(var i=0;i<count;i++){
|
|
64
|
+
offset_y=(i-big_scale_from)%big_scale_at?small_scale:big_scale;
|
|
65
|
+
p.push([x,y]);
|
|
66
|
+
y-=offset_y;
|
|
67
|
+
p.push([x,y]);
|
|
68
|
+
y+=offset_y;
|
|
69
|
+
p.push([x,y]);
|
|
70
|
+
x+=range_width;
|
|
71
|
+
}
|
|
72
|
+
var point=document.querySelector("#svg-id").createSVGPoint();
|
|
73
|
+
p.forEach(function(n){
|
|
74
|
+
point.x = n[0];
|
|
75
|
+
point.y = n[1];
|
|
76
|
+
document.querySelector("#numberLine").points.appendItem(point);
|
|
77
|
+
});
|
|
78
|
+
});
|
|
79
|
+
</script>
|
|
80
|
+
<svg id="svg-id" width="210" height="300">
|
|
81
|
+
<polyline id="numberLine" x="0" y="0" stroke="black" fill="none" />
|
|
82
|
+
<text x= "5" y="15">0</text>
|
|
83
|
+
<text x= "55" y="15">5</text>
|
|
84
|
+
<text x="100" y="15">10</text>
|
|
85
|
+
<text x="150" y="15">15</text>
|
|
86
|
+
</svg>
|
|
46
87
|
```
|