回答編集履歴
5
調整
test
CHANGED
@@ -176,270 +176,358 @@
|
|
176
176
|
|
177
177
|
# ついで
|
178
178
|
|
179
|
+
※文字数の関係で一部削除
|
180
|
+
|
181
|
+
|
182
|
+
|
183
|
+
# 任意に数値を指定する方法
|
184
|
+
|
179
|
-
|
185
|
+
やや複雑になってきていますが、ついてきていますか?
|
186
|
+
|
187
|
+
|
180
188
|
|
181
189
|
```javascript
|
182
190
|
|
183
|
-
数直線4
|
184
|
-
|
185
191
|
<script>
|
186
192
|
|
187
193
|
window.addEventListener('DOMContentLoaded', function(e){
|
188
194
|
|
189
|
-
|
190
|
-
|
191
|
-
svg.
|
192
|
-
|
193
|
-
|
194
|
-
|
195
|
-
|
196
|
-
|
197
|
-
|
198
|
-
|
199
|
-
|
200
|
-
|
201
|
-
var x=
|
202
|
-
|
203
|
-
var offset_
|
204
|
-
|
205
|
-
var
|
206
|
-
|
207
|
-
var
|
208
|
-
|
209
|
-
var big_scale
|
210
|
-
|
211
|
-
var big_scale_
|
212
|
-
|
213
|
-
var
|
214
|
-
|
215
|
-
var
|
216
|
-
|
217
|
-
var p
|
218
|
-
|
219
|
-
|
220
|
-
|
221
|
-
|
222
|
-
|
223
|
-
o
|
224
|
-
|
225
|
-
|
226
|
-
|
227
|
-
|
228
|
-
|
229
|
-
p.push([x,y]);
|
230
|
-
|
231
|
-
|
232
|
-
|
233
|
-
|
234
|
-
|
235
|
-
x
|
195
|
+
document.querySelector('#draw').addEventListener('click',function(e){
|
196
|
+
|
197
|
+
var svg1 = document.querySelector("#svg1");
|
198
|
+
|
199
|
+
var init_x = parseInt(document.querySelector('#x').value);
|
200
|
+
|
201
|
+
var init_y = parseInt(document.querySelector('#y').value);
|
202
|
+
|
203
|
+
var position_x = init_x;
|
204
|
+
|
205
|
+
var position_y = init_y;
|
206
|
+
|
207
|
+
var offset_x = parseInt(document.querySelector('#range_width').value);
|
208
|
+
|
209
|
+
var offset_y = 0;
|
210
|
+
|
211
|
+
var small_scale = parseInt(document.querySelector('#small_scale').value);
|
212
|
+
|
213
|
+
var big_scale = parseInt(document.querySelector('#big_scale').value);
|
214
|
+
|
215
|
+
var big_scale_at = parseInt(document.querySelector('#big_scale_at').value);
|
216
|
+
|
217
|
+
var big_scale_from = parseInt(document.querySelector('#big_scale_from').value);
|
218
|
+
|
219
|
+
var count = parseInt(document.querySelector('#count').value);
|
220
|
+
|
221
|
+
var start_num = parseInt(document.querySelector('#start_num').value);
|
222
|
+
|
223
|
+
var add_num = parseInt(document.querySelector('#add_num').value);
|
224
|
+
|
225
|
+
|
226
|
+
|
227
|
+
/* 初期化 */
|
228
|
+
|
229
|
+
[].forEach.call(svg1.querySelectorAll("*"),function(x){x.parentNode.removeChild(x);});
|
230
|
+
|
231
|
+
|
232
|
+
|
233
|
+
var p=[];
|
234
|
+
|
235
|
+
p.push([position_x,position_y]);
|
236
|
+
|
237
|
+
for(var i=0;i<count;i++){
|
238
|
+
|
239
|
+
offset_y=(i-big_scale_from)%big_scale_at?small_scale:big_scale;
|
240
|
+
|
241
|
+
p.push([position_x,position_y]);
|
242
|
+
|
243
|
+
position_y-=offset_y
|
244
|
+
|
245
|
+
p.push([position_x,position_y]);
|
246
|
+
|
247
|
+
position_y+=offset_y
|
248
|
+
|
249
|
+
p.push([position_x,position_y]);
|
250
|
+
|
251
|
+
position_x+=offset_x;
|
252
|
+
|
253
|
+
}
|
254
|
+
|
255
|
+
var pl= document.createElementNS('http://www.w3.org/2000/svg', 'polyline');
|
256
|
+
|
257
|
+
pl.setAttribute("id","numberLine");
|
258
|
+
|
259
|
+
pl.setAttribute("stroke","black");
|
260
|
+
|
261
|
+
pl.setAttribute("fill","none");
|
262
|
+
|
263
|
+
svg1.appendChild(pl);
|
264
|
+
|
265
|
+
|
266
|
+
|
267
|
+
var point=svg1.createSVGPoint();
|
268
|
+
|
269
|
+
p.forEach(function(n){
|
270
|
+
|
271
|
+
point.x = n[0];
|
272
|
+
|
273
|
+
point.y = n[1];
|
274
|
+
|
275
|
+
document.querySelector("#numberLine").points.appendItem(point);
|
276
|
+
|
277
|
+
});
|
278
|
+
|
279
|
+
var texts=[];
|
280
|
+
|
281
|
+
var adjust_num_y = 2;
|
282
|
+
|
283
|
+
var num=start_num;
|
284
|
+
|
285
|
+
for(var i=big_scale_from;i<count;i+=big_scale_at){
|
286
|
+
|
287
|
+
var adjust_num_x = num.toString().length*5;
|
288
|
+
|
289
|
+
texts.push([num,init_x+offset_x*i-adjust_num_x,init_y-big_scale-adjust_num_y]);
|
290
|
+
|
291
|
+
num+=big_scale_at*add_num;
|
292
|
+
|
293
|
+
}
|
294
|
+
|
295
|
+
texts.forEach(function(x){
|
296
|
+
|
297
|
+
var t= document.createElementNS('http://www.w3.org/2000/svg', 'text');
|
298
|
+
|
299
|
+
t.setAttribute("id","text");
|
300
|
+
|
301
|
+
t.textContent=x[0];
|
302
|
+
|
303
|
+
t.setAttribute("x",x[1]);
|
304
|
+
|
305
|
+
t.setAttribute("y",x[2]);
|
306
|
+
|
307
|
+
svg1.appendChild(t);
|
308
|
+
|
309
|
+
});
|
310
|
+
|
311
|
+
});
|
312
|
+
|
313
|
+
});
|
314
|
+
|
315
|
+
|
316
|
+
|
317
|
+
</script>
|
318
|
+
|
319
|
+
|
320
|
+
|
321
|
+
<div id="input">
|
322
|
+
|
323
|
+
数直線の位置 X:<input type="text" id="x" value="150" size="2"> Y:<input type="text" id="y" value="150" size="2"><br>
|
324
|
+
|
325
|
+
目盛り幅:<input type="text" id="range_width" value="30" size="2"><br>
|
326
|
+
|
327
|
+
目盛り高さ 小:<input type="text" id="small_scale" value="5" size="2"> 大:<input type="text" id="big_scale" value="10" size="2"><br>
|
328
|
+
|
329
|
+
大目盛り 頻度:<input type="text" id="big_scale_at" value="5" size="2"> 開始位置:<input type="text" id="big_scale_from" value="0" size="2"><br>
|
330
|
+
|
331
|
+
回数:<input type="text" id="count" value="20" size="2"><br>
|
332
|
+
|
333
|
+
数値 開始:<input type="text" id="start_num" value="0" size="2"> 増加:<input type="text" id="add_num" value="1" size="2"><br>
|
334
|
+
|
335
|
+
<input type="button" id="draw" value="draw"><hr>
|
336
|
+
|
337
|
+
</div>
|
338
|
+
|
339
|
+
<svg id="svg1" width=800 height=300></svg>
|
340
|
+
|
341
|
+
```
|
342
|
+
|
343
|
+
|
344
|
+
|
345
|
+
# 初期表示&入力するたびに数直線が変化
|
346
|
+
|
347
|
+
|
348
|
+
|
349
|
+
```javascript
|
350
|
+
|
351
|
+
<script>
|
352
|
+
|
353
|
+
[NodeList,HTMLCollection].forEach(function(x){
|
354
|
+
|
355
|
+
x.prototype.addEventListener=function(eventStr,callback){
|
356
|
+
|
357
|
+
[].forEach.call(this,function(x){
|
358
|
+
|
359
|
+
x.addEventListener(eventStr,callback);
|
360
|
+
|
361
|
+
});
|
362
|
+
|
363
|
+
};
|
364
|
+
|
365
|
+
});
|
366
|
+
|
367
|
+
HTMLElement.prototype.trigger=function(eventStr){
|
368
|
+
|
369
|
+
if (document.createEvent) {
|
370
|
+
|
371
|
+
var e = document.createEvent("HTMLEvents");
|
372
|
+
|
373
|
+
e.initEvent(eventStr, true, true );
|
374
|
+
|
375
|
+
return this.dispatchEvent(e);
|
376
|
+
|
377
|
+
} else {
|
378
|
+
|
379
|
+
var e = document.createEventObject();
|
380
|
+
|
381
|
+
return this.fireEvent("on"+eventStr, e);
|
236
382
|
|
237
383
|
}
|
238
384
|
|
385
|
+
};
|
386
|
+
|
387
|
+
window.addEventListener('DOMContentLoaded', function(e){
|
388
|
+
|
389
|
+
document.querySelectorAll('#input input').addEventListener('change',function(){
|
390
|
+
|
391
|
+
var svg1 = document.querySelector("#svg1");
|
392
|
+
|
393
|
+
var init_x = parseInt(document.querySelector('#x').value);
|
394
|
+
|
395
|
+
var init_y = parseInt(document.querySelector('#y').value);
|
396
|
+
|
397
|
+
var position_x = init_x;
|
398
|
+
|
399
|
+
var position_y = init_y;
|
400
|
+
|
401
|
+
var offset_x = parseInt(document.querySelector('#range_width').value);
|
402
|
+
|
403
|
+
var offset_y = 0;
|
404
|
+
|
405
|
+
var small_scale = parseInt(document.querySelector('#small_scale').value);
|
406
|
+
|
407
|
+
var big_scale = parseInt(document.querySelector('#big_scale').value);
|
408
|
+
|
409
|
+
var big_scale_at = parseInt(document.querySelector('#big_scale_at').value);
|
410
|
+
|
411
|
+
var big_scale_from = parseInt(document.querySelector('#big_scale_from').value);
|
412
|
+
|
413
|
+
var count = parseInt(document.querySelector('#count').value);
|
414
|
+
|
415
|
+
var start_num = parseInt(document.querySelector('#start_num').value);
|
416
|
+
|
417
|
+
var add_num = parseInt(document.querySelector('#add_num').value);
|
418
|
+
|
419
|
+
|
420
|
+
|
421
|
+
/* 初期化 */
|
422
|
+
|
423
|
+
[].forEach.call(svg1.querySelectorAll("*"),function(x){x.parentNode.removeChild(x);});
|
424
|
+
|
425
|
+
|
426
|
+
|
427
|
+
var p=[];
|
428
|
+
|
429
|
+
p.push([position_x,position_y]);
|
430
|
+
|
431
|
+
for(var i=0;i<count;i++){
|
432
|
+
|
433
|
+
offset_y=(i-big_scale_from)%big_scale_at?small_scale:big_scale;
|
434
|
+
|
435
|
+
p.push([position_x,position_y]);
|
436
|
+
|
437
|
+
position_y-=offset_y;
|
438
|
+
|
439
|
+
p.push([position_x,position_y]);
|
440
|
+
|
441
|
+
position_y+=offset_y;
|
442
|
+
|
443
|
+
p.push([position_x,position_y]);
|
444
|
+
|
445
|
+
position_x+=offset_x;
|
446
|
+
|
447
|
+
}
|
448
|
+
|
239
|
-
var pl= document.createElementNS('http://www.w3.org/2000/svg', 'polyline');
|
449
|
+
var pl= document.createElementNS('http://www.w3.org/2000/svg', 'polyline');
|
240
|
-
|
450
|
+
|
241
|
-
pl.setAttribute("id","numberLine");
|
451
|
+
pl.setAttribute("id","numberLine");
|
242
|
-
|
452
|
+
|
243
|
-
pl.setAttribute("stroke","black");
|
453
|
+
pl.setAttribute("stroke","black");
|
244
|
-
|
454
|
+
|
245
|
-
pl.setAttribute("fill","none");
|
455
|
+
pl.setAttribute("fill","none");
|
246
|
-
|
456
|
+
|
247
|
-
|
457
|
+
svg1.appendChild(pl);
|
248
|
-
|
249
|
-
|
250
|
-
|
458
|
+
|
459
|
+
|
460
|
+
|
251
|
-
var point=
|
461
|
+
var point=svg1.createSVGPoint();
|
252
|
-
|
462
|
+
|
253
|
-
p.forEach(function(n){
|
463
|
+
p.forEach(function(n){
|
254
|
-
|
464
|
+
|
255
|
-
point.x = n[0];
|
465
|
+
point.x = n[0];
|
256
|
-
|
466
|
+
|
257
|
-
point.y = n[1];
|
467
|
+
point.y = n[1];
|
258
|
-
|
468
|
+
|
259
|
-
document.querySelector("#numberLine").points.appendItem(point);
|
469
|
+
document.querySelector("#numberLine").points.appendItem(point);
|
470
|
+
|
471
|
+
});
|
472
|
+
|
473
|
+
var texts=[];
|
474
|
+
|
475
|
+
var adjust_num_y = 2;
|
476
|
+
|
477
|
+
var num=start_num;
|
478
|
+
|
479
|
+
for(var i=big_scale_from;i<count;i+=big_scale_at){
|
480
|
+
|
481
|
+
var adjust_num_x = num.toString().length*5;
|
482
|
+
|
483
|
+
texts.push([num,init_x+offset_x*i-adjust_num_x,init_y-big_scale-adjust_num_y]);
|
484
|
+
|
485
|
+
num+=big_scale_at*add_num;
|
486
|
+
|
487
|
+
}
|
488
|
+
|
489
|
+
texts.forEach(function(x){
|
490
|
+
|
491
|
+
var t= document.createElementNS('http://www.w3.org/2000/svg', 'text');
|
492
|
+
|
493
|
+
t.setAttribute("id","text");
|
494
|
+
|
495
|
+
t.textContent=x[0];
|
496
|
+
|
497
|
+
t.setAttribute("x",x[1]);
|
498
|
+
|
499
|
+
t.setAttribute("y",x[2]);
|
500
|
+
|
501
|
+
svg1.appendChild(t);
|
502
|
+
|
503
|
+
});
|
260
504
|
|
261
505
|
});
|
262
506
|
|
263
|
-
var texts=[["0",5,15],["5",55,15],["10",100,15],["15",150,15]];
|
264
|
-
|
265
|
-
texts.forEach(function(x){
|
266
|
-
|
267
|
-
var t= document.createElementNS('http://www.w3.org/2000/svg', 'text');
|
268
|
-
|
269
|
-
t.textContent=x[0];
|
270
|
-
|
271
|
-
t.setAttribute("x",x[1]);
|
272
|
-
|
273
|
-
t.setAttribute("y",x[2]);
|
274
|
-
|
275
|
-
|
507
|
+
document.querySelector('#input input').trigger('change');
|
276
|
-
|
277
|
-
});
|
278
508
|
|
279
509
|
});
|
280
510
|
|
281
511
|
</script>
|
282
512
|
|
513
|
+
|
514
|
+
|
515
|
+
<div id="input">
|
516
|
+
|
517
|
+
数直線の位置 X:<input type="text" id="x" value="150" size="2"> Y:<input type="text" id="y" value="150" size="2"><br>
|
518
|
+
|
519
|
+
目盛り幅:<input type="text" id="range_width" value="30" size="2"><br>
|
520
|
+
|
521
|
+
目盛り高さ 小:<input type="text" id="small_scale" value="5" size="2"> 大:<input type="text" id="big_scale" value="10" size="2"><br>
|
522
|
+
|
523
|
+
大目盛り 頻度:<input type="text" id="big_scale_at" value="5" size="2"> 開始位置:<input type="text" id="big_scale_from" value="0" size="2"><br>
|
524
|
+
|
525
|
+
回数:<input type="text" id="count" value="20" size="2"><br>
|
526
|
+
|
527
|
+
数値 開始:<input type="text" id="start_num" value="0" size="2"> 増加:<input type="text" id="add_num" value="1" size="2"><br>
|
528
|
+
|
529
|
+
</div>
|
530
|
+
|
531
|
+
<svg id="svg1" width=800 height=300></svg>
|
532
|
+
|
283
533
|
```
|
284
|
-
|
285
|
-
|
286
|
-
|
287
|
-
# 任意に数値を指定する方法
|
288
|
-
|
289
|
-
やや複雑になってきていますが、ついてきていますか?
|
290
|
-
|
291
|
-
|
292
|
-
|
293
|
-
```javascript
|
294
|
-
|
295
|
-
<script>
|
296
|
-
|
297
|
-
window.addEventListener('DOMContentLoaded', function(e){
|
298
|
-
|
299
|
-
document.querySelector('#draw').addEventListener('click',function(e){
|
300
|
-
|
301
|
-
var svg1 = document.querySelector("#svg1");
|
302
|
-
|
303
|
-
var init_x = parseInt(document.querySelector('#x').value);
|
304
|
-
|
305
|
-
var init_y = parseInt(document.querySelector('#y').value);
|
306
|
-
|
307
|
-
var position_x = init_x;
|
308
|
-
|
309
|
-
var position_y = init_y;
|
310
|
-
|
311
|
-
var offset_x = parseInt(document.querySelector('#range_width').value);
|
312
|
-
|
313
|
-
var offset_y = 0;
|
314
|
-
|
315
|
-
var small_scale = parseInt(document.querySelector('#small_scale').value);
|
316
|
-
|
317
|
-
var big_scale = parseInt(document.querySelector('#big_scale').value);
|
318
|
-
|
319
|
-
var big_scale_at = parseInt(document.querySelector('#big_scale_at').value);
|
320
|
-
|
321
|
-
var big_scale_from = parseInt(document.querySelector('#big_scale_from').value);
|
322
|
-
|
323
|
-
var count = parseInt(document.querySelector('#count').value);
|
324
|
-
|
325
|
-
var start_num = parseInt(document.querySelector('#start_num').value);
|
326
|
-
|
327
|
-
var add_num = parseInt(document.querySelector('#add_num').value);
|
328
|
-
|
329
|
-
|
330
|
-
|
331
|
-
/* 初期化 */
|
332
|
-
|
333
|
-
[].forEach.call(svg1.querySelectorAll("*"),function(x){x.parentNode.removeChild(x);});
|
334
|
-
|
335
|
-
|
336
|
-
|
337
|
-
var p=[];
|
338
|
-
|
339
|
-
p.push([position_x,position_y]);
|
340
|
-
|
341
|
-
for(var i=0;i<count;i++){
|
342
|
-
|
343
|
-
offset_y=(i-big_scale_from)%big_scale_at?small_scale:big_scale;
|
344
|
-
|
345
|
-
p.push([position_x,position_y]);
|
346
|
-
|
347
|
-
position_y-=offset_y
|
348
|
-
|
349
|
-
p.push([position_x,position_y]);
|
350
|
-
|
351
|
-
position_y+=offset_y
|
352
|
-
|
353
|
-
p.push([position_x,position_y]);
|
354
|
-
|
355
|
-
position_x+=offset_x;
|
356
|
-
|
357
|
-
}
|
358
|
-
|
359
|
-
var pl= document.createElementNS('http://www.w3.org/2000/svg', 'polyline');
|
360
|
-
|
361
|
-
pl.setAttribute("id","numberLine");
|
362
|
-
|
363
|
-
pl.setAttribute("stroke","black");
|
364
|
-
|
365
|
-
pl.setAttribute("fill","none");
|
366
|
-
|
367
|
-
svg1.appendChild(pl);
|
368
|
-
|
369
|
-
|
370
|
-
|
371
|
-
var point=svg1.createSVGPoint();
|
372
|
-
|
373
|
-
p.forEach(function(n){
|
374
|
-
|
375
|
-
point.x = n[0];
|
376
|
-
|
377
|
-
point.y = n[1];
|
378
|
-
|
379
|
-
document.querySelector("#numberLine").points.appendItem(point);
|
380
|
-
|
381
|
-
});
|
382
|
-
|
383
|
-
var texts=[];
|
384
|
-
|
385
|
-
var adjust_num_y = 2;
|
386
|
-
|
387
|
-
var num=start_num;
|
388
|
-
|
389
|
-
for(var i=big_scale_from;i<count;i+=big_scale_at){
|
390
|
-
|
391
|
-
var adjust_num_x = num.toString().length*5;
|
392
|
-
|
393
|
-
texts.push([num,init_x+offset_x*i-adjust_num_x,init_y-big_scale-adjust_num_y]);
|
394
|
-
|
395
|
-
num+=big_scale_at*add_num;
|
396
|
-
|
397
|
-
}
|
398
|
-
|
399
|
-
texts.forEach(function(x){
|
400
|
-
|
401
|
-
var t= document.createElementNS('http://www.w3.org/2000/svg', 'text');
|
402
|
-
|
403
|
-
t.setAttribute("id","text");
|
404
|
-
|
405
|
-
t.textContent=x[0];
|
406
|
-
|
407
|
-
t.setAttribute("x",x[1]);
|
408
|
-
|
409
|
-
t.setAttribute("y",x[2]);
|
410
|
-
|
411
|
-
svg1.appendChild(t);
|
412
|
-
|
413
|
-
});
|
414
|
-
|
415
|
-
});
|
416
|
-
|
417
|
-
});
|
418
|
-
|
419
|
-
|
420
|
-
|
421
|
-
</script>
|
422
|
-
|
423
|
-
|
424
|
-
|
425
|
-
<div id="input">
|
426
|
-
|
427
|
-
数直線の位置 X:<input type="text" id="x" value="150" size="2"> Y:<input type="text" id="y" value="150" size="2"><br>
|
428
|
-
|
429
|
-
目盛り幅:<input type="text" id="range_width" value="30" size="2"><br>
|
430
|
-
|
431
|
-
目盛り高さ 小:<input type="text" id="small_scale" value="5" size="2"> 大:<input type="text" id="big_scale" value="10" size="2"><br>
|
432
|
-
|
433
|
-
大目盛り 頻度:<input type="text" id="big_scale_at" value="5" size="2"> 開始位置:<input type="text" id="big_scale_from" value="0" size="2"><br>
|
434
|
-
|
435
|
-
回数:<input type="text" id="count" value="20" size="2"><br>
|
436
|
-
|
437
|
-
数値 開始:<input type="text" id="start_num" value="0" size="2"> 増加:<input type="text" id="add_num" value="1" size="2"><br>
|
438
|
-
|
439
|
-
<input type="button" id="draw" value="draw"><hr>
|
440
|
-
|
441
|
-
</div>
|
442
|
-
|
443
|
-
<svg id="svg1" width=800 height=300></svg>
|
444
|
-
|
445
|
-
```
|
4
修正
test
CHANGED
@@ -392,7 +392,7 @@
|
|
392
392
|
|
393
393
|
texts.push([num,init_x+offset_x*i-adjust_num_x,init_y-big_scale-adjust_num_y]);
|
394
394
|
|
395
|
-
num+=big_scale_at;
|
395
|
+
num+=big_scale_at*add_num;
|
396
396
|
|
397
397
|
}
|
398
398
|
|
3
調整
test
CHANGED
@@ -281,3 +281,165 @@
|
|
281
281
|
</script>
|
282
282
|
|
283
283
|
```
|
284
|
+
|
285
|
+
|
286
|
+
|
287
|
+
# 任意に数値を指定する方法
|
288
|
+
|
289
|
+
やや複雑になってきていますが、ついてきていますか?
|
290
|
+
|
291
|
+
|
292
|
+
|
293
|
+
```javascript
|
294
|
+
|
295
|
+
<script>
|
296
|
+
|
297
|
+
window.addEventListener('DOMContentLoaded', function(e){
|
298
|
+
|
299
|
+
document.querySelector('#draw').addEventListener('click',function(e){
|
300
|
+
|
301
|
+
var svg1 = document.querySelector("#svg1");
|
302
|
+
|
303
|
+
var init_x = parseInt(document.querySelector('#x').value);
|
304
|
+
|
305
|
+
var init_y = parseInt(document.querySelector('#y').value);
|
306
|
+
|
307
|
+
var position_x = init_x;
|
308
|
+
|
309
|
+
var position_y = init_y;
|
310
|
+
|
311
|
+
var offset_x = parseInt(document.querySelector('#range_width').value);
|
312
|
+
|
313
|
+
var offset_y = 0;
|
314
|
+
|
315
|
+
var small_scale = parseInt(document.querySelector('#small_scale').value);
|
316
|
+
|
317
|
+
var big_scale = parseInt(document.querySelector('#big_scale').value);
|
318
|
+
|
319
|
+
var big_scale_at = parseInt(document.querySelector('#big_scale_at').value);
|
320
|
+
|
321
|
+
var big_scale_from = parseInt(document.querySelector('#big_scale_from').value);
|
322
|
+
|
323
|
+
var count = parseInt(document.querySelector('#count').value);
|
324
|
+
|
325
|
+
var start_num = parseInt(document.querySelector('#start_num').value);
|
326
|
+
|
327
|
+
var add_num = parseInt(document.querySelector('#add_num').value);
|
328
|
+
|
329
|
+
|
330
|
+
|
331
|
+
/* 初期化 */
|
332
|
+
|
333
|
+
[].forEach.call(svg1.querySelectorAll("*"),function(x){x.parentNode.removeChild(x);});
|
334
|
+
|
335
|
+
|
336
|
+
|
337
|
+
var p=[];
|
338
|
+
|
339
|
+
p.push([position_x,position_y]);
|
340
|
+
|
341
|
+
for(var i=0;i<count;i++){
|
342
|
+
|
343
|
+
offset_y=(i-big_scale_from)%big_scale_at?small_scale:big_scale;
|
344
|
+
|
345
|
+
p.push([position_x,position_y]);
|
346
|
+
|
347
|
+
position_y-=offset_y
|
348
|
+
|
349
|
+
p.push([position_x,position_y]);
|
350
|
+
|
351
|
+
position_y+=offset_y
|
352
|
+
|
353
|
+
p.push([position_x,position_y]);
|
354
|
+
|
355
|
+
position_x+=offset_x;
|
356
|
+
|
357
|
+
}
|
358
|
+
|
359
|
+
var pl= document.createElementNS('http://www.w3.org/2000/svg', 'polyline');
|
360
|
+
|
361
|
+
pl.setAttribute("id","numberLine");
|
362
|
+
|
363
|
+
pl.setAttribute("stroke","black");
|
364
|
+
|
365
|
+
pl.setAttribute("fill","none");
|
366
|
+
|
367
|
+
svg1.appendChild(pl);
|
368
|
+
|
369
|
+
|
370
|
+
|
371
|
+
var point=svg1.createSVGPoint();
|
372
|
+
|
373
|
+
p.forEach(function(n){
|
374
|
+
|
375
|
+
point.x = n[0];
|
376
|
+
|
377
|
+
point.y = n[1];
|
378
|
+
|
379
|
+
document.querySelector("#numberLine").points.appendItem(point);
|
380
|
+
|
381
|
+
});
|
382
|
+
|
383
|
+
var texts=[];
|
384
|
+
|
385
|
+
var adjust_num_y = 2;
|
386
|
+
|
387
|
+
var num=start_num;
|
388
|
+
|
389
|
+
for(var i=big_scale_from;i<count;i+=big_scale_at){
|
390
|
+
|
391
|
+
var adjust_num_x = num.toString().length*5;
|
392
|
+
|
393
|
+
texts.push([num,init_x+offset_x*i-adjust_num_x,init_y-big_scale-adjust_num_y]);
|
394
|
+
|
395
|
+
num+=big_scale_at;
|
396
|
+
|
397
|
+
}
|
398
|
+
|
399
|
+
texts.forEach(function(x){
|
400
|
+
|
401
|
+
var t= document.createElementNS('http://www.w3.org/2000/svg', 'text');
|
402
|
+
|
403
|
+
t.setAttribute("id","text");
|
404
|
+
|
405
|
+
t.textContent=x[0];
|
406
|
+
|
407
|
+
t.setAttribute("x",x[1]);
|
408
|
+
|
409
|
+
t.setAttribute("y",x[2]);
|
410
|
+
|
411
|
+
svg1.appendChild(t);
|
412
|
+
|
413
|
+
});
|
414
|
+
|
415
|
+
});
|
416
|
+
|
417
|
+
});
|
418
|
+
|
419
|
+
|
420
|
+
|
421
|
+
</script>
|
422
|
+
|
423
|
+
|
424
|
+
|
425
|
+
<div id="input">
|
426
|
+
|
427
|
+
数直線の位置 X:<input type="text" id="x" value="150" size="2"> Y:<input type="text" id="y" value="150" size="2"><br>
|
428
|
+
|
429
|
+
目盛り幅:<input type="text" id="range_width" value="30" size="2"><br>
|
430
|
+
|
431
|
+
目盛り高さ 小:<input type="text" id="small_scale" value="5" size="2"> 大:<input type="text" id="big_scale" value="10" size="2"><br>
|
432
|
+
|
433
|
+
大目盛り 頻度:<input type="text" id="big_scale_at" value="5" size="2"> 開始位置:<input type="text" id="big_scale_from" value="0" size="2"><br>
|
434
|
+
|
435
|
+
回数:<input type="text" id="count" value="20" size="2"><br>
|
436
|
+
|
437
|
+
数値 開始:<input type="text" id="start_num" value="0" size="2"> 増加:<input type="text" id="add_num" value="1" size="2"><br>
|
438
|
+
|
439
|
+
<input type="button" id="draw" value="draw"><hr>
|
440
|
+
|
441
|
+
</div>
|
442
|
+
|
443
|
+
<svg id="svg1" width=800 height=300></svg>
|
444
|
+
|
445
|
+
```
|
2
ついで
test
CHANGED
@@ -171,3 +171,113 @@
|
|
171
171
|
</svg>
|
172
172
|
|
173
173
|
```
|
174
|
+
|
175
|
+
|
176
|
+
|
177
|
+
# ついで
|
178
|
+
|
179
|
+
すべてJSで処理する場合はsvgはNSで処理しないといけないので注意
|
180
|
+
|
181
|
+
```javascript
|
182
|
+
|
183
|
+
数直線4
|
184
|
+
|
185
|
+
<script>
|
186
|
+
|
187
|
+
window.addEventListener('DOMContentLoaded', function(e){
|
188
|
+
|
189
|
+
var svg= document.createElementNS('http://www.w3.org/2000/svg', 'svg');
|
190
|
+
|
191
|
+
svg.setAttribute("id","svg-id");
|
192
|
+
|
193
|
+
svg.setAttribute("width","210");
|
194
|
+
|
195
|
+
svg.setAttribute("height","300");
|
196
|
+
|
197
|
+
document.querySelector('body').appendChild(svg);
|
198
|
+
|
199
|
+
|
200
|
+
|
201
|
+
var x=10,y=30; //初期座標
|
202
|
+
|
203
|
+
var offset_x =10; //目盛幅
|
204
|
+
|
205
|
+
var offset_y = 0; //目盛高さ(変動)
|
206
|
+
|
207
|
+
var small_scale = 5; //目盛高さ(小)
|
208
|
+
|
209
|
+
var big_scale =10; //目盛高さ(大)
|
210
|
+
|
211
|
+
var big_scale_at = 5; //大目盛頻度
|
212
|
+
|
213
|
+
var big_scale_from = 0; //大目盛開始位置
|
214
|
+
|
215
|
+
var count =20; //回数
|
216
|
+
|
217
|
+
var p=[];
|
218
|
+
|
219
|
+
p.push([x,y]);
|
220
|
+
|
221
|
+
for(var i=0;i<count;i++){
|
222
|
+
|
223
|
+
offset_y=(i-big_scale_from)%big_scale_at?small_scale:big_scale;
|
224
|
+
|
225
|
+
p.push([x,y]);
|
226
|
+
|
227
|
+
y-=offset_y
|
228
|
+
|
229
|
+
p.push([x,y]);
|
230
|
+
|
231
|
+
y+=offset_y
|
232
|
+
|
233
|
+
p.push([x,y]);
|
234
|
+
|
235
|
+
x+=offset_x;
|
236
|
+
|
237
|
+
}
|
238
|
+
|
239
|
+
var pl= document.createElementNS('http://www.w3.org/2000/svg', 'polyline');
|
240
|
+
|
241
|
+
pl.setAttribute("id","numberLine");
|
242
|
+
|
243
|
+
pl.setAttribute("stroke","black");
|
244
|
+
|
245
|
+
pl.setAttribute("fill","none");
|
246
|
+
|
247
|
+
document.querySelector("#svg-id").appendChild(pl);
|
248
|
+
|
249
|
+
|
250
|
+
|
251
|
+
var point=document.querySelector("#svg-id").createSVGPoint();
|
252
|
+
|
253
|
+
p.forEach(function(n){
|
254
|
+
|
255
|
+
point.x = n[0];
|
256
|
+
|
257
|
+
point.y = n[1];
|
258
|
+
|
259
|
+
document.querySelector("#numberLine").points.appendItem(point);
|
260
|
+
|
261
|
+
});
|
262
|
+
|
263
|
+
var texts=[["0",5,15],["5",55,15],["10",100,15],["15",150,15]];
|
264
|
+
|
265
|
+
texts.forEach(function(x){
|
266
|
+
|
267
|
+
var t= document.createElementNS('http://www.w3.org/2000/svg', 'text');
|
268
|
+
|
269
|
+
t.textContent=x[0];
|
270
|
+
|
271
|
+
t.setAttribute("x",x[1]);
|
272
|
+
|
273
|
+
t.setAttribute("y",x[2]);
|
274
|
+
|
275
|
+
document.querySelector("#svg-id").appendChild(t);
|
276
|
+
|
277
|
+
});
|
278
|
+
|
279
|
+
});
|
280
|
+
|
281
|
+
</script>
|
282
|
+
|
283
|
+
```
|
1
まとめ
test
CHANGED
@@ -89,3 +89,85 @@
|
|
89
89
|
</svg>
|
90
90
|
|
91
91
|
```
|
92
|
+
|
93
|
+
|
94
|
+
|
95
|
+
# まとめ
|
96
|
+
|
97
|
+
上記をまとめるとこんな感じ?
|
98
|
+
|
99
|
+
```javascript
|
100
|
+
|
101
|
+
<script>
|
102
|
+
|
103
|
+
window.addEventListener('DOMContentLoaded', function(e){
|
104
|
+
|
105
|
+
var x=10,y=30; //初期座標
|
106
|
+
|
107
|
+
var range_width =10; //目盛幅
|
108
|
+
|
109
|
+
var small_scale = 5; //目盛高さ(小)
|
110
|
+
|
111
|
+
var big_scale =10; //目盛高さ(大)
|
112
|
+
|
113
|
+
var big_scale_at = 5; //大目盛頻度
|
114
|
+
|
115
|
+
var big_scale_from = 0; //大目盛開始位置
|
116
|
+
|
117
|
+
var count =20; //回数
|
118
|
+
|
119
|
+
var p=[];
|
120
|
+
|
121
|
+
var offset=0;
|
122
|
+
|
123
|
+
p.push([x,y]);
|
124
|
+
|
125
|
+
for(var i=0;i<count;i++){
|
126
|
+
|
127
|
+
offset_y=(i-big_scale_from)%big_scale_at?small_scale:big_scale;
|
128
|
+
|
129
|
+
p.push([x,y]);
|
130
|
+
|
131
|
+
y-=offset_y;
|
132
|
+
|
133
|
+
p.push([x,y]);
|
134
|
+
|
135
|
+
y+=offset_y;
|
136
|
+
|
137
|
+
p.push([x,y]);
|
138
|
+
|
139
|
+
x+=range_width;
|
140
|
+
|
141
|
+
}
|
142
|
+
|
143
|
+
var point=document.querySelector("#svg-id").createSVGPoint();
|
144
|
+
|
145
|
+
p.forEach(function(n){
|
146
|
+
|
147
|
+
point.x = n[0];
|
148
|
+
|
149
|
+
point.y = n[1];
|
150
|
+
|
151
|
+
document.querySelector("#numberLine").points.appendItem(point);
|
152
|
+
|
153
|
+
});
|
154
|
+
|
155
|
+
});
|
156
|
+
|
157
|
+
</script>
|
158
|
+
|
159
|
+
<svg id="svg-id" width="210" height="300">
|
160
|
+
|
161
|
+
<polyline id="numberLine" x="0" y="0" stroke="black" fill="none" />
|
162
|
+
|
163
|
+
<text x= "5" y="15">0</text>
|
164
|
+
|
165
|
+
<text x= "55" y="15">5</text>
|
166
|
+
|
167
|
+
<text x="100" y="15">10</text>
|
168
|
+
|
169
|
+
<text x="150" y="15">15</text>
|
170
|
+
|
171
|
+
</svg>
|
172
|
+
|
173
|
+
```
|