質問編集履歴

3

書式の改善

2017/12/04 08:18

投稿

takunii925
takunii925

スコア11

test CHANGED
File without changes
test CHANGED
@@ -1,4 +1,4 @@
1
- htmlのため、エラーメッセージなどは出ませんが、グラフを表示した時に横軸の目盛り、縦軸の目盛り、また項目目盛りが表示されません。おそらく下の太字部分が間違っていると思うのですが、改変してみてもうまくいきません。
1
+ htmlのため、エラーメッセージなどは出ませんが、グラフを表示した時に横軸の目盛り、縦軸の目盛り、また項目目盛りが表示されません。おそらく下の###部分が間違っていると思うのですが、改変してみてもうまくいきません。
2
2
 
3
3
 
4
4
 
@@ -204,23 +204,9 @@
204
204
 
205
205
 
206
206
 
207
- /*
208
-
209
- 下記のコードは、ラベルはtext要素を追加することで表示します。
210
-
211
- 棒グラフ内にデータを表示します。今回のデータセットには、
212
-
213
- データ内にラベル名の情報は含まれていません。
214
-
215
- 以下のようにすると、配列に表示するラベルの文字を格納しておき
216
-
217
- 順場に応じて返すようにします。
218
-
219
- */
220
-
221
207
  ###.text(function(d,i){
222
208
 
223
- ###return ["A","B","C","D","E","F","G","H","I"][i];
209
+ ###return ["A","B","C","D","E","F","G","H","I"][i];
224
210
 
225
211
  });
226
212
 

2

コード部分の指定

2017/12/04 08:18

投稿

takunii925
takunii925

スコア11

test CHANGED
File without changes
test CHANGED
@@ -4,9 +4,11 @@
4
4
 
5
5
 
6
6
 
7
+
8
+
7
- [test.js]
9
+ ```JavaScriptここに言語を入力
8
-
10
+
9
- var svgWidth = 320 //svg要素の幅
11
+ var svgWidth = 320 //svg要素の幅
10
12
 
11
13
  var svgHeight = 320; //svg要素の高さ
12
14
 
@@ -222,6 +224,8 @@
222
224
 
223
225
  });
224
226
 
227
+ ```
228
+
225
229
 
226
230
 
227
231
 

1

質問内容の編集

2017/12/04 08:04

投稿

takunii925
takunii925

スコア11

test CHANGED
File without changes
test CHANGED
@@ -1,337 +1,229 @@
1
- ドの通りに実行してみても、グラフが正しく表示されません。
2
-
3
- どこを改変したらいいか教えてください。
4
-
5
-
6
-
7
- [index.html]
8
-
9
- <!DOCTYPE html>
10
-
11
- <head>
12
-
13
- <meta charset="utf-8">
14
-
15
- <title>D3.js 縦棒グラフを表示する</title>
16
-
17
-
18
-
19
- <style>
20
-
21
- svg{
22
-
23
- width:320px;
24
-
25
- height:340px;
26
-
27
- border:2px solid black;
28
-
29
- }
30
-
31
- rect{fill:green;}
32
-
33
- .fillPink{fill:pink;}
34
-
35
-
1
+ htmlため、エラメッセージなどは出ませんが、グラフを表示した時に横軸の目盛り、縦軸の目盛り、また項目目盛りが表示されません。おそらく下の太字部分が間違っていると思うのですが、改変してみてもうまくいきません。
2
+
3
+
4
+
5
+
6
+
7
+ [test.js]
8
+
9
+ var svgWidth = 320 //svg要素の幅
10
+
11
+ var svgHeight = 320; //svg要素の高さ
12
+
13
+ var xOffset = 40; //X座標のずれ具合
14
+
15
+ var yOffset = 10; //Y座標のずれ具合
16
+
17
+ var bar; //棒グラフの棒の要素を格納
18
+
19
+
20
+
21
+ var arrData = [120,80,150,200,110,260,220,40,100];
22
+
23
+ var maxNum = 300;
24
+
25
+ var barWidth = 20;
26
+
27
+ var barMargin = 5;
28
+
29
+
30
+
31
+ //棒グラフを描画
32
+
33
+ bar = d3.select("#graph")
34
+
35
+ .selectAll("rect")
36
+
37
+ .data(arrData);
38
+
39
+
40
+
41
+ bar.enter()
42
+
43
+ .append("rect")
44
+
45
+ .attr("class", "fillPink")
46
+
47
+
48
+
49
+ //アニメーションの初期値0を設定
50
+
51
+ .attr("height",0)
52
+
53
+
54
+
55
+ .attr("width",barWidth)
56
+
57
+ .attr("x",function(d,i){
58
+
59
+ return i * (barWidth + barMargin) + xOffset;
60
+
61
+ })
62
+
63
+ //グラフの一番下に座標を設定
64
+
65
+ .attr("y", svgHeight - yOffset )
66
+
67
+
68
+
69
+ //アニメーションをする
70
+
71
+ .transition()
72
+
73
+ .duration(1200)
36
74
 
37
75
 
38
76
 
39
77
  /*
40
78
 
41
- 縦棒グラフにラベルを表示する設定
79
+ 縦棒グラフの左側から
80
+
81
+ アニメーションを開始するように設定する
42
82
 
43
83
  */
44
84
 
45
- .barNum{
46
-
47
- font-size:10px;
48
-
49
- text-anchor:middle;
50
-
51
- }
52
-
53
-
54
-
55
- .axis text{
56
-
57
- font-family:sans-serif;
58
-
59
- font-size:11px;
60
-
61
- }
62
-
63
- .axis path,
64
-
65
- .axis line{
66
-
67
- fill:none;
68
-
69
- stroke:green;
70
-
71
- }
72
-
73
- .axisX line{
74
-
75
- fill:none;
76
-
77
- stroke:black;
78
-
79
- }
80
-
81
- .barName{
82
-
83
- font-size:9px;
84
-
85
- text-anchor:middle;
86
-
87
- }
88
-
89
- </style>
90
-
91
- <script src="https://d3js.org/d3.v4.min.js"></script>
92
-
93
-
94
-
95
- </head>
96
-
97
- <body>
98
-
99
- <h2>縦棒グラフを表示</h2>
100
-
101
- <svg id="graph"></svg>
102
-
103
- <script src="test.js"></script>
104
-
105
- </body>
106
-
107
- </html>
108
-
109
-
110
-
111
- [test.js]
112
-
113
-
114
-
115
-
116
-
117
- var svgWidth = 320 //svg要素の幅
118
-
119
- var svgHeight = 320; //svg要素の高さ
120
-
121
- var xOffset = 40; //X座標のずれ具合
122
-
123
- var yOffset = 10; //Y座標のずれ具合
124
-
125
- var bar; //棒グラフの棒の要素を格納
126
-
127
-
128
-
129
- var arrData = [120,80,150,200,110,260,220,40,100];
130
-
131
- var maxNum = 300;
132
-
133
- var barWidth = 20;
134
-
135
- var barMargin = 5;
136
-
137
-
138
-
139
- //棒グラフを描画
140
-
141
- bar = d3.select("#graph")
142
-
143
- .selectAll("rect")
144
-
145
- .data(arrData);
146
-
147
-
85
+ .delay(function(d,i){
86
+
87
+ return i * 120;
88
+
89
+ })
90
+
91
+ .attr("y",function(d,i){ //Y座標を指定
92
+
93
+ return svgHeight - d - yOffset; //Y座標を計算
94
+
95
+ })
96
+
97
+ .attr("height",function(d,i){
98
+
99
+ return d;
100
+
101
+ })
102
+
103
+
104
+
105
+
106
+
107
+ //棒グラフの数値を描画する
108
+
109
+ bar.enter() //text要素を指定
110
+
111
+ .append("text") //text要素を追加
112
+
113
+ .attr("class","barNum") //CSSクラスを指定
114
+
115
+ .attr("x",function(d,i){ //X座標を指定
116
+
117
+ return i * (barWidth + barMargin) + 10 + xOffset; //棒グラフの表示間隔に合わせる
118
+
119
+ })
120
+
121
+ .attr("y", svgHeight -5 - yOffset )//Y座標を指定
122
+
123
+ .text(function(d,i){ //データを表示
124
+
125
+ return d;
126
+
127
+ });
128
+
129
+
130
+
131
+ //目盛り表示の為の縮尺表示
132
+
133
+ var yScale = d3.scale.linear()
134
+
135
+ .domain([0,maxNum])
136
+
137
+ .range([maxNum,0]);
138
+
139
+
140
+
141
+ d3.select("#graph")
142
+
143
+ .append("g")
144
+
145
+ .attr("class","axis")
146
+
147
+ .attr("transform", "translate(" + xOffset + ", " + ((svgHeight - 300)- yOffset) + ")")
148
+
149
+ .call(
150
+
151
+ d3.svg.axis()
152
+
153
+ .scale(yScale)
154
+
155
+ .orient("left")
156
+
157
+
158
+
159
+ ###.ticks(20)
160
+
161
+ ###.tickValues( [10.50,30.36,50,100,200,300] )
162
+
163
+ ###.tickFormat(d3.format(".2f"))
164
+
165
+
166
+
167
+ );
168
+
169
+
170
+
171
+ //横方向の線を表示する
172
+
173
+ d3.select("#graph")
174
+
175
+ .append("rect")
176
+
177
+ .attr("class","axisX")
178
+
179
+ .attr("width",300)
180
+
181
+ .attr("height",1)
182
+
183
+ .attr("transform","translate(" + xOffset + ", " + (svgHeight - yOffset ) + ")" );
184
+
185
+
186
+
187
+ //棒のラベルを表示する
148
188
 
149
189
  bar.enter()
150
190
 
151
- .append("rect")
191
+ .append("text")
152
-
192
+
153
- .attr("class", "fillPink")
193
+ .attr("class","barName")
154
-
155
-
156
-
157
- //アニメーションの初期値0を設定
158
-
159
- .attr("height",0)
160
-
161
-
162
-
163
- .attr("width",barWidth)
164
194
 
165
195
  .attr("x",function(d,i){
166
196
 
167
- return i * (barWidth + barMargin) + xOffset;
197
+ return i * 25 + 10 + xOffset;
168
-
198
+
169
- })
199
+ })
170
-
171
- //グラフの一番下に座標を設定
200
+
172
-
173
- .attr("y", svgHeight - yOffset )
201
+ .attr("y", svgHeight - yOffset + 15 )
174
-
175
-
176
-
177
- //アニメーションをする
178
-
179
- .transition()
180
-
181
- .duration(1200)
182
202
 
183
203
 
184
204
 
185
205
  /*
186
206
 
207
+ 下記のコードは、ラベルはtext要素を追加することで表示します。
208
+
209
+ 棒グラフ内にデータを表示します。今回のデータセットには、
210
+
187
- 縦棒グ左側から
211
+ データ内にベル名情報は含まれていません。
212
+
188
-
213
+ 以下のようにすると、配列に表示するラベルの文字を格納しておき
214
+
189
- アニメーションを開始ように設定
215
+ 順場に応じて返すようにしま
190
216
 
191
217
  */
192
218
 
193
- .delay(function(d,i){
219
+ ###.text(function(d,i){
194
-
195
- return i * 120;
220
+
196
-
197
- })
198
-
199
- .attr("y",function(d,i){ //Y座標を指定
200
-
201
- return svgHeight - d - yOffset; //Y座標を計算
202
-
203
- })
204
-
205
- .attr("height",function(d,i){
206
-
207
- return d;
208
-
209
- })
210
-
211
-
212
-
213
-
214
-
215
- //棒グラフの数値を描画する
216
-
217
- bar.enter() //text要素を指定
218
-
219
- .append("text") //text要素を追加
220
-
221
- .attr("class","barNum") //CSSクラスを指定
221
+ ###return ["A","B","C","D","E","F","G","H","I"][i];
222
-
223
- .attr("x",function(d,i){ //X座標を指定
224
-
225
- return i * (barWidth + barMargin) + 10 + xOffset; //棒グラフの表示間隔に合わせる
226
-
227
- })
228
-
229
- .attr("y", svgHeight -5 - yOffset )//Y座標を指定
230
-
231
- .text(function(d,i){ //データを表示
232
-
233
- return d;
234
222
 
235
223
  });
236
224
 
237
225
 
238
226
 
239
- //目盛り表示の為の縮尺表示
240
-
241
- var yScale = d3.scale.linear()
242
-
243
- .domain([0,maxNum])
244
-
245
- .range([maxNum,0]);
246
-
247
-
248
-
249
- d3.select("#graph")
250
-
251
- .append("g")
252
-
253
- .attr("class","axis")
254
-
255
- .attr("transform", "translate(" + xOffset + ", " + ((svgHeight - 300)- yOffset) + ")")
256
-
257
- .call(
258
-
259
- d3.svg.axis()
260
-
261
- .scale(yScale)
262
-
263
- .orient("left")
264
-
265
-
266
-
267
- /* .ticks(20)
268
-
269
- .tickValues( [10.50,30.36,50,100,200,300] )
270
-
271
- .tickFormat(d3.format(".2f"))
272
-
273
- */
274
-
275
- );
276
-
277
-
278
-
279
- //横方向の線を表示する
280
-
281
- d3.select("#graph")
282
-
283
- .append("rect")
284
-
285
- .attr("class","axisX")
286
-
287
- .attr("width",300)
288
-
289
- .attr("height",1)
290
-
291
- .attr("transform","translate(" + xOffset + ", " + (svgHeight - yOffset ) + ")" );
292
-
293
-
294
-
295
- //棒のラベルを表示する
296
-
297
- bar.enter()
298
-
299
- .append("text")
300
-
301
- .attr("class","barName")
302
-
303
- .attr("x",function(d,i){
304
-
305
- return i * 25 + 10 + xOffset;
306
-
307
- })
308
-
309
- .attr("y", svgHeight - yOffset + 15 )
310
-
311
-
312
-
313
- /*
314
-
315
- 下記のコードは、ラベルはtext要素を追加することで表示します。
316
-
317
- 棒グラフ内にデータを表示します。今回のデータセットには、
318
-
319
- データ内にラベル名の情報は含まれていません。
320
-
321
- 以下のようにすると、配列に表示するラベルの文字を格納しておき
322
-
323
- 順場に応じて返すようにします。
324
-
325
- */
326
-
327
- .text(function(d,i){
328
-
329
- return ["A","B","C","D","E","F","G","H","I"][i];
330
-
331
- });
332
-
333
-
334
-
335
227
 
336
228
 
337
229