d 3シリーズ2-api難関攻略戦07
今日の内容は少しインタラクティブ性を追加しましたが、これらのインタラクティブ性はcssによって制御されています.
それ以外に、横座標は伝統的な数字を使わないで、アルファベットを使って表して、だから前のいくつかはやはり違いがあります
次はデータファイル
letter.tsv
それ以外に、横座標は伝統的な数字を使わないで、アルファベットを使って表して、だから前のいくつかはやはり違いがあります
<html>
<head>
<title></title>
<meta name="timerecord" content="1h,12.21,14.14,9.39"/>
<style type="text/css">
.bar {
fill: steelblue;
}
.bar:hover {
fill: brown;
}
.axis {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.x.axis path {
display: none;
}
</style>
</head>
<body>
<script src="js/d3.v3.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var margin = {top: 20, right: 20, bottom: 30, left: 40},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var x = d3.scale.ordinal()// , ，
.rangeRoundBands([0,width],0.1);// 0.1 ， 1
var y = d3.scale.linear()
.range([height, 0]);
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.ticks(10,"%");// % 0-1 ，20
d3.tsv("letter.tsv",function(error,data){
if(error) throw error;
/* */
data.forEach(function(d){
d.frequency = +d.frequency;
});
x.domain(data.map(function(d) { return d.letter; }));// ， ， map
y.domain([0, d3.max(data, function(d) { return d.frequency; })]);// 0.12
svg.selectAll(".bar")
.data(data)
.enter().append("rect")
.attr("class","bar")
.attr("x",function(d){return x(d.letter);})
.attr("width",x.rangeBand())
.attr("y",function(d){return y(d.frequency);})//
.attr("height",function(d){return height-y(d.frequency)});//
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.call(yAxis)
})
</script>
</body>
</html>次はデータファイル
letter.tsv
letter frequency
A .08167
B .01492
C .02782
D .04253
E .12702
F .02288
G .02015
H .06094
I .06966
J .00153
K .00772
L .04025
M .02406
N .06749
O .07507
P .01929
Q .00095
R .05987
S .06327
T .09056
U .02758
V .00978
W .02360
X .00150
Y .01974
Z .00074