質問編集履歴
3
書式の改善
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
htmlのため、エラーメッセージなどは出ませんが、グラフを表示した時に横軸の目盛り、縦軸の目盛り、また項目目盛りが表示されません。おそらく下の
|
|
1
|
+
htmlのため、エラーメッセージなどは出ませんが、グラフを表示した時に横軸の目盛り、縦軸の目盛り、また項目目盛りが表示されません。おそらく下の###部分が間違っていると思うのですが、改変してみてもうまくいきません。
|
|
2
2
|
|
|
3
3
|
|
|
4
4
|
|
|
@@ -101,15 +101,8 @@
|
|
|
101
101
|
})
|
|
102
102
|
.attr("y", svgHeight - yOffset + 15 )
|
|
103
103
|
|
|
104
|
-
/*
|
|
105
|
-
下記のコードは、ラベルはtext要素を追加することで表示します。
|
|
106
|
-
棒グラフ内にデータを表示します。今回のデータセットには、
|
|
107
|
-
データ内にラベル名の情報は含まれていません。
|
|
108
|
-
以下のようにすると、配列に表示するラベルの文字を格納しておき
|
|
109
|
-
順場に応じて返すようにします。
|
|
110
|
-
*/
|
|
111
104
|
###.text(function(d,i){
|
|
112
|
-
|
|
105
|
+
###return ["A","B","C","D","E","F","G","H","I"][i];
|
|
113
106
|
});
|
|
114
107
|
```
|
|
115
108
|
|
2
コード部分の指定
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
htmlのため、エラーメッセージなどは出ませんが、グラフを表示した時に横軸の目盛り、縦軸の目盛り、また項目目盛りが表示されません。おそらく下の太字部分が間違っていると思うのですが、改変してみてもうまくいきません。
|
|
2
2
|
|
|
3
3
|
|
|
4
|
+
|
|
4
|
-
|
|
5
|
+
```JavaScriptここに言語を入力
|
|
5
|
-
|
|
6
|
+
var svgWidth = 320 //svg要素の幅
|
|
6
7
|
var svgHeight = 320; //svg要素の高さ
|
|
7
8
|
var xOffset = 40; //Ｘ座標のずれ具合
|
|
8
9
|
var yOffset = 10; //Ｙ座標のずれ具合
|
|
@@ -110,6 +111,7 @@
|
|
|
110
111
|
###.text(function(d,i){
|
|
111
112
|
###return ["A","B","C","D","E","F","G","H","I"][i];
|
|
112
113
|
});
|
|
114
|
+
```
|
|
113
115
|
|
|
114
116
|
|
|
115
117
|
|
1
質問内容の編集
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -1,61 +1,7 @@
|
|
|
1
|
-
|
|
1
|
+
htmlのため、エラーメッセージなどは出ませんが、グラフを表示した時に横軸の目盛り、縦軸の目盛り、また項目目盛りが表示されません。おそらく下の太字部分が間違っていると思うのですが、改変してみてもうまくいきません。
|
|
2
|
-
どこを改変したらいいか教えてください。
|
|
3
2
|
|
|
4
|
-
[index.html]
|
|
5
|
-
<!DOCTYPE html>
|
|
6
|
-
<head>
|
|
7
|
-
<meta charset="utf-8">
|
|
8
|
-
<title>D3.js 縦棒グラフを表示する</title>
|
|
9
3
|
|
|
10
|
-
<style>
|
|
11
|
-
svg{
|
|
12
|
-
width:320px;
|
|
13
|
-
height:340px;
|
|
14
|
-
border:2px solid black;
|
|
15
|
-
}
|
|
16
|
-
rect{fill:green;}
|
|
17
|
-
.fillPink{fill:pink;}
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
/*
|
|
21
|
-
縦棒グラフにラベルを表示する設定
|
|
22
|
-
*/
|
|
23
|
-
.barNum{
|
|
24
|
-
font-size:10px;
|
|
25
|
-
text-anchor:middle;
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
.axis text{
|
|
29
|
-
font-family:sans-serif;
|
|
30
|
-
font-size:11px;
|
|
31
|
-
}
|
|
32
|
-
.axis path,
|
|
33
|
-
.axis line{
|
|
34
|
-
fill:none;
|
|
35
|
-
stroke:green;
|
|
36
|
-
}
|
|
37
|
-
.axisX line{
|
|
38
|
-
fill:none;
|
|
39
|
-
stroke:black;
|
|
40
|
-
}
|
|
41
|
-
.barName{
|
|
42
|
-
font-size:9px;
|
|
43
|
-
text-anchor:middle;
|
|
44
|
-
}
|
|
45
|
-
</style>
|
|
46
|
-
<script src="https://d3js.org/d3.v4.min.js"></script>
|
|
47
|
-
|
|
48
|
-
</head>
|
|
49
|
-
<body>
|
|
50
|
-
<h2>縦棒グラフを表示</h2>
|
|
51
|
-
<svg id="graph"></svg>
|
|
52
|
-
<script src="test.js"></script>
|
|
53
|
-
</body>
|
|
54
|
-
</html>
|
|
55
|
-
|
|
56
4
|
[test.js]
|
|
57
|
-
|
|
58
|
-
|
|
59
5
|
var svgWidth = 320 //svg要素の幅
|
|
60
6
|
var svgHeight = 320; //svg要素の高さ
|
|
61
7
|
var xOffset = 40; //Ｘ座標のずれ具合
|
|
@@ -131,10 +77,10 @@
|
|
|
131
77
|
.scale(yScale)
|
|
132
78
|
.orient("left")
|
|
133
79
|
|
|
134
|
-
|
|
80
|
+
###.ticks(20)
|
|
135
|
-
.tickValues( [10.50,30.36,50,100,200,300] )
|
|
81
|
+
###.tickValues( [10.50,30.36,50,100,200,300] )
|
|
136
|
-
.tickFormat(d3.format(".2f"))
|
|
82
|
+
###.tickFormat(d3.format(".2f"))
|
|
137
|
-
|
|
83
|
+
|
|
138
84
|
);
|
|
139
85
|
|
|
140
86
|
//横方向の線を表示する
|
|
@@ -161,8 +107,8 @@
|
|
|
161
107
|
以下のようにすると、配列に表示するラベルの文字を格納しておき
|
|
162
108
|
順場に応じて返すようにします。
|
|
163
109
|
*/
|
|
164
|
-
.text(function(d,i){
|
|
110
|
+
###.text(function(d,i){
|
|
165
|
-
return ["A","B","C","D","E","F","G","H","I"][i];
|
|
111
|
+
###return ["A","B","C","D","E","F","G","H","I"][i];
|
|
166
112
|
});
|
|
167
113
|
|
|
168
114
|
|