質問編集履歴

1

コード修正

2018/10/18 04:40

投稿

jam912sh
jam912sh

スコア25

test CHANGED
File without changes
test CHANGED
@@ -52,33 +52,33 @@
52
52
 
53
53
  <!-- 棒グラフ -->
54
54
 
55
- <div>
55
+
56
56
 
57
57
  <script src="https://d3js.org/d3.v4.min.js"></script>
58
58
 
59
- <svg width="400" height="400" id="test1"></svg>
59
+ <svg width="400" height="400" id="test1" class="1"></svg>
60
60
 
61
61
  <script>
62
62
 
63
- var svg = d3.select("svg"),
63
+ var svg1 = d3.select("svg"),
64
64
 
65
65
  margin = 150,
66
66
 
67
- width = svg.attr("width") - margin,
67
+ width = svg1.attr("width") - margin,
68
-
68
+
69
- height = svg.attr("height") - margin
69
+ height = svg1.attr("height") - margin
70
-
71
-
72
-
70
+
71
+
72
+
73
- svg.append("text")
73
+ svg1.append("text")
74
74
 
75
75
  .attr("transform", "translate(100,0)")
76
76
 
77
- .attr("x", 50)
77
+ .attr("x", 45)
78
-
78
+
79
- .attr("y", 50)
79
+ .attr("y", 45)
80
-
80
+
81
- .attr("font-size", "24px")
81
+ .attr("font-size", "20px")
82
82
 
83
83
  .text("棒グラフ")
84
84
 
@@ -90,7 +90,7 @@
90
90
 
91
91
 
92
92
 
93
- var g = svg.append("g")
93
+ var g1 = svg1.append("g")
94
94
 
95
95
  .attr("transform", "translate(" + 100 + "," + 100 + ")");
96
96
 
@@ -112,7 +112,7 @@
112
112
 
113
113
 
114
114
 
115
- g.append("g")
115
+ g1.append("g")
116
116
 
117
117
  .attr("transform", "translate(0," + height + ")")
118
118
 
@@ -132,7 +132,7 @@
132
132
 
133
133
 
134
134
 
135
- g.append("g")
135
+ g1.append("g")
136
136
 
137
137
  .call(d3.axisLeft(yScale).tickFormat(function(d){
138
138
 
@@ -158,7 +158,7 @@
158
158
 
159
159
 
160
160
 
161
- g.selectAll(".bar")
161
+ g1.selectAll(".bar")
162
162
 
163
163
  .data(data)
164
164
 
@@ -178,137 +178,149 @@
178
178
 
179
179
  </script>
180
180
 
181
-
182
-
183
181
  <!-- 棒グラフEND -->
184
182
 
185
183
 
186
184
 
187
185
  <!-- 円グラフ -->
188
186
 
189
-
187
+ <script src="https://d3js.org/d3.v4.min.js"></script>
190
-
188
+
191
- <svg width="400" height="400" id="test2"></svg>
189
+ <svg width="400" height="400" id="test2" class="2"></svg>
192
190
 
193
191
  <script>
194
192
 
195
193
 
196
194
 
197
- var svg = d3.select("svg"),
198
-
199
- width = svg.attr("width"),
200
-
201
- height = svg.attr("height"),
202
-
203
- radius = Math.min(width, height) / 2;
204
-
205
-
206
-
207
- var g = svg.append("g")
208
-
209
- .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
210
-
211
-
212
-
213
- var color = d3.scaleOrdinal(["#ff7f7f", "#7fbfff", "#7fffff", "#7fffbf", "#7fff7f", "#bfff7f", "#ffff7f","#ffbf7f", "#ff7fbf", "#ff7fff", "#bf7fff", "#7f7fff"]);
214
-
215
-
216
-
217
- var pie = d3.pie().value(function(d) {
218
-
219
- return d.percent;
220
-
221
- });
222
-
223
-
224
-
225
- var path = d3.arc()
226
-
227
- .outerRadius(radius - 10)
228
-
229
- .innerRadius(radius - 70);
230
-
231
-
232
-
233
- var label = d3.arc()
234
-
235
- .outerRadius(radius)
236
-
237
- .innerRadius(radius - 80);
238
-
239
-
240
-
241
- d3.csv("browseruse.csv", function(error, data) {
242
-
243
- if (error) {
244
-
245
- throw error;
246
-
247
- }
248
-
249
- var arc = g.selectAll(".arc")
250
-
251
- .data(pie(data))
252
-
253
- .enter().append("g")
254
-
255
- .attr("class", "arc");
256
-
257
-
258
-
259
- arc.append("path")
260
-
261
- .attr("d", path)
262
-
263
- .attr("fill", function(d) { return color(d.data.browser); });
264
-
265
-
266
-
267
- console.log(arc)
268
-
269
-
270
-
271
- arc.append("text")
272
-
273
- .attr("transform", function(d) {
274
-
275
- return "translate(" + label.centroid(d) + ")";
276
-
277
- })
278
-
279
- .attr("dy", ".40em")
280
-
281
- .text(function(d) { return d.data.browser; });
282
-
283
-
284
-
285
-
286
-
287
- arc.append("text")
288
-
289
- .attr("transform", function(d) {
290
-
291
- return "translate(" + label.centroid(d) + ")";
292
-
293
- })
294
-
295
- .attr("dy", "-1.0em")
296
-
297
- .text(function(d) { return d.data.percent; });
298
-
299
- });
300
-
301
-
302
-
303
- svg.append("g")
304
-
305
- .attr("transform", "translate(" + (width / 2 - 120) + "," + 20 + ")")
306
-
307
- .append("text")
308
-
309
- .attr("class", "title")
310
-
311
- .text("円グラフ")
195
+ var svg2 = d3.select("svg"),
196
+
197
+ width = svg2.attr("width"),
198
+
199
+ height = svg2.attr("height"),
200
+
201
+ //円の大きさ
202
+
203
+ radius = Math.min(width, height) / 2.5;
204
+
205
+
206
+
207
+ var g2 = svg2.append("g")
208
+
209
+ .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
210
+
211
+
212
+
213
+ var color = d3.scaleOrdinal(["#ff7f7f", "#7fbfff", "#7fffff", "#7fffbf", "#7fff7f", "#bfff7f", "#ffff7f","#ffbf7f", "#ff7fbf", "#ff7fff", "#bf7fff", "#7f7fff"]);
214
+
215
+
216
+
217
+ var pie = d3.pie().value(function(d) {
218
+
219
+ return d.percent;
220
+
221
+ });
222
+
223
+ //文字の位置1
224
+
225
+ var path = d3.arc()
226
+
227
+ .outerRadius(radius - 10)
228
+
229
+ .innerRadius(radius - 80);
230
+
231
+ //文字の位置2
232
+
233
+ var label = d3.arc()
234
+
235
+ .outerRadius(radius)
236
+
237
+ .innerRadius(radius - 100);
238
+
239
+
240
+
241
+ d3.csv("browseruse.csv", function(error, data) {
242
+
243
+ if (error) {
244
+
245
+ throw error;
246
+
247
+ }
248
+
249
+ var arc = g2.selectAll(".arc")
250
+
251
+ .data(pie(data))
252
+
253
+ .enter().append("g")
254
+
255
+ .attr("class", "arc");
256
+
257
+
258
+
259
+ arc.append("path")
260
+
261
+ .attr("d", path)
262
+
263
+ .attr("fill", function(d) { return color(d.data.browser); });
264
+
265
+
266
+
267
+ console.log(arc)
268
+
269
+
270
+
271
+ arc.append("text")
272
+
273
+ .attr("transform", function(d) {
274
+
275
+ return "translate(" + label.centroid(d) + ")";
276
+
277
+ })
278
+
279
+ .attr("dy", ".40em")
280
+
281
+ .text(function(d) { return d.data.browser; });
282
+
283
+
284
+
285
+
286
+
287
+ arc.append("text")
288
+
289
+ .attr("transform", function(d) {
290
+
291
+ return "translate(" + label.centroid(d) + ")";
292
+
293
+ })
294
+
295
+ .attr("dy", "-1.0em")
296
+
297
+ .text(function(d) { return d.data.percent; });
298
+
299
+ });
300
+
301
+ //タイトルの設定
302
+
303
+ svg2.append("g")
304
+
305
+ //文字位置
306
+
307
+ .attr("transform", "translate(" + (width / 2 - 50) + "," + 30 + ")")
308
+
309
+ .append("text")
310
+
311
+ .attr("class", "title")
312
+
313
+ .attr("font-size", "20px")
314
+
315
+ .text("円グラフ")
316
+
317
+
318
+
319
+ </script>
320
+
321
+
322
+
323
+ <!-- 円グラフEND -->
312
324
 
313
325
 
314
326