質問編集履歴
1
コード修正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -25,26 +25,26 @@
|
|
|
25
25
|
</head>
|
|
26
26
|
<body>
|
|
27
27
|
<!-- 棒グラフ -->
|
|
28
|
-
|
|
28
|
+
|
|
29
29
|
<script src="https://d3js.org/d3.v4.min.js"></script>
|
|
30
|
-
<svg width="400" height="400" id="test1"></svg>
|
|
30
|
+
<svg width="400" height="400" id="test1" class="1"></svg>
|
|
31
31
|
<script>
|
|
32
|
-
var
|
|
32
|
+
var svg1 = d3.select("svg"),
|
|
33
33
|
margin = 150,
|
|
34
|
-
width =
|
|
34
|
+
width = svg1.attr("width") - margin,
|
|
35
|
-
height =
|
|
35
|
+
height = svg1.attr("height") - margin
|
|
36
36
|
|
|
37
|
-
|
|
37
|
+
svg1.append("text")
|
|
38
38
|
.attr("transform", "translate(100,0)")
|
|
39
|
-
.attr("x",
|
|
39
|
+
.attr("x", 45)
|
|
40
|
-
.attr("y",
|
|
40
|
+
.attr("y", 45)
|
|
41
|
-
.attr("font-size", "
|
|
41
|
+
.attr("font-size", "20px")
|
|
42
42
|
.text("棒グラフ")
|
|
43
43
|
|
|
44
44
|
var xScale = d3.scaleBand().range([0, width]).padding(0.4),
|
|
45
45
|
yScale = d3.scaleLinear().range([height, 0]);
|
|
46
46
|
|
|
47
|
-
var
|
|
47
|
+
var g1 = svg1.append("g")
|
|
48
48
|
.attr("transform", "translate(" + 100 + "," + 100 + ")");
|
|
49
49
|
|
|
50
50
|
d3.csv("XYZ.csv", function(error, data) {
|
|
@@ -55,7 +55,7 @@
|
|
|
55
55
|
xScale.domain(data.map(function(d) { return d.year; }));
|
|
56
56
|
yScale.domain([0, d3.max(data, function(d) { return d.value; })]);
|
|
57
57
|
|
|
58
|
-
|
|
58
|
+
g1.append("g")
|
|
59
59
|
.attr("transform", "translate(0," + height + ")")
|
|
60
60
|
.call(d3.axisBottom(xScale))
|
|
61
61
|
.append("text")
|
|
@@ -65,7 +65,7 @@
|
|
|
65
65
|
.attr("stroke", "black")
|
|
66
66
|
|
|
67
67
|
|
|
68
|
-
|
|
68
|
+
g1.append("g")
|
|
69
69
|
.call(d3.axisLeft(yScale).tickFormat(function(d){
|
|
70
70
|
return d;
|
|
71
71
|
})
|
|
@@ -78,7 +78,7 @@
|
|
|
78
78
|
.attr("stroke", "black")
|
|
79
79
|
|
|
80
80
|
|
|
81
|
-
|
|
81
|
+
g1.selectAll(".bar")
|
|
82
82
|
.data(data)
|
|
83
83
|
.enter().append("rect")
|
|
84
84
|
.attr("class", "bar")
|
|
@@ -88,73 +88,79 @@
|
|
|
88
88
|
.attr("height", function(d) { return height - yScale(d.value); });
|
|
89
89
|
});
|
|
90
90
|
</script>
|
|
91
|
-
|
|
92
91
|
<!-- 棒グラフEND -->
|
|
93
92
|
|
|
94
93
|
<!-- 円グラフ -->
|
|
95
|
-
|
|
94
|
+
<script src="https://d3js.org/d3.v4.min.js"></script>
|
|
96
|
-
|
|
95
|
+
<svg width="400" height="400" id="test2" class="2"></svg>
|
|
97
96
|
<script>
|
|
98
97
|
|
|
99
|
-
|
|
98
|
+
var svg2 = d3.select("svg"),
|
|
100
|
-
|
|
99
|
+
width = svg2.attr("width"),
|
|
101
|
-
|
|
100
|
+
height = svg2.attr("height"),
|
|
101
|
+
//円の大きさ
|
|
102
|
-
|
|
102
|
+
radius = Math.min(width, height) / 2.5;
|
|
103
103
|
|
|
104
|
-
|
|
104
|
+
var g2 = svg2.append("g")
|
|
105
|
-
|
|
105
|
+
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
|
|
106
106
|
|
|
107
|
-
|
|
107
|
+
var color = d3.scaleOrdinal(["#ff7f7f", "#7fbfff", "#7fffff", "#7fffbf", "#7fff7f", "#bfff7f", "#ffff7f","#ffbf7f", "#ff7fbf", "#ff7fff", "#bf7fff", "#7f7fff"]);
|
|
108
108
|
|
|
109
|
-
|
|
109
|
+
var pie = d3.pie().value(function(d) {
|
|
110
|
-
|
|
110
|
+
return d.percent;
|
|
111
|
-
|
|
111
|
+
});
|
|
112
|
+
//文字の位置１
|
|
113
|
+
var path = d3.arc()
|
|
114
|
+
.outerRadius(radius - 10)
|
|
115
|
+
.innerRadius(radius - 80);
|
|
116
|
+
//文字の位置２
|
|
117
|
+
var label = d3.arc()
|
|
118
|
+
.outerRadius(radius)
|
|
119
|
+
.innerRadius(radius - 100);
|
|
112
120
|
|
|
121
|
+
d3.csv("browseruse.csv", function(error, data) {
|
|
122
|
+
if (error) {
|
|
123
|
+
throw error;
|
|
124
|
+
}
|
|
125
|
+
var arc = g2.selectAll(".arc")
|
|
113
|
-
|
|
126
|
+
.data(pie(data))
|
|
114
|
-
.outerRadius(radius - 10)
|
|
115
|
-
|
|
127
|
+
.enter().append("g")
|
|
128
|
+
.attr("class", "arc");
|
|
116
129
|
|
|
117
|
-
var label = d3.arc()
|
|
118
|
-
|
|
130
|
+
arc.append("path")
|
|
119
|
-
|
|
131
|
+
.attr("d", path)
|
|
132
|
+
.attr("fill", function(d) { return color(d.data.browser); });
|
|
120
133
|
|
|
121
|
-
d3.csv("browseruse.csv", function(error, data) {
|
|
122
|
-
if (error) {
|
|
123
|
-
|
|
134
|
+
console.log(arc)
|
|
124
|
-
}
|
|
125
|
-
var arc = g.selectAll(".arc")
|
|
126
|
-
.data(pie(data))
|
|
127
|
-
.enter().append("g")
|
|
128
|
-
.attr("class", "arc");
|
|
129
135
|
|
|
130
|
-
|
|
136
|
+
arc.append("text")
|
|
137
|
+
.attr("transform", function(d) {
|
|
138
|
+
return "translate(" + label.centroid(d) + ")";
|
|
139
|
+
})
|
|
131
|
-
|
|
140
|
+
.attr("dy", ".40em")
|
|
132
|
-
|
|
141
|
+
.text(function(d) { return d.data.browser; });
|
|
133
142
|
|
|
134
|
-
console.log(arc)
|
|
135
143
|
|
|
136
|
-
|
|
144
|
+
arc.append("text")
|
|
137
|
-
|
|
145
|
+
.attr("transform", function(d) {
|
|
138
|
-
|
|
146
|
+
return "translate(" + label.centroid(d) + ")";
|
|
139
|
-
|
|
147
|
+
})
|
|
140
|
-
|
|
148
|
+
.attr("dy", "-1.0em")
|
|
141
|
-
|
|
149
|
+
.text(function(d) { return d.data.percent; });
|
|
150
|
+
});
|
|
151
|
+
//タイトルの設定
|
|
152
|
+
svg2.append("g")
|
|
153
|
+
//文字位置
|
|
154
|
+
.attr("transform", "translate(" + (width / 2 - 50) + "," + 30 + ")")
|
|
155
|
+
.append("text")
|
|
156
|
+
.attr("class", "title")
|
|
157
|
+
.attr("font-size", "20px")
|
|
158
|
+
.text("円グラフ")
|
|
142
159
|
|
|
160
|
+
</script>
|
|
143
161
|
|
|
144
|
-
|
|
162
|
+
<!-- 円グラフEND -->
|
|
145
|
-
.attr("transform", function(d) {
|
|
146
|
-
return "translate(" + label.centroid(d) + ")";
|
|
147
|
-
})
|
|
148
|
-
.attr("dy", "-1.0em")
|
|
149
|
-
.text(function(d) { return d.data.percent; });
|
|
150
|
-
});
|
|
151
163
|
|
|
152
|
-
svg.append("g")
|
|
153
|
-
.attr("transform", "translate(" + (width / 2 - 120) + "," + 20 + ")")
|
|
154
|
-
.append("text")
|
|
155
|
-
.attr("class", "title")
|
|
156
|
-
.text("円グラフ")
|
|
157
|
-
|
|
158
164
|
</script>
|
|
159
165
|
</body>
|
|
160
166
|
</html>
|