このくらいの表現だったらD3.jsじゃなくていいんだけど、まあ練習ということで。
できたのが、こちら。
|
1 2 3 4 |
var w = 960, h = 500; d3.json("2015.json",function(json){ |
↑まず、jsonの読み込みです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
var padding = 80; var svg = d3.select("body").append("svg").attr({width:w,height:h}); var yScale = d3.scale.linear() .domain([0, d3.max(json, function(d){return d.att;})]) .range([h-padding,padding]) .nice(); var xScale = d3.scale.ordinal() .domain(json.map(function(d) { return d.vs; })) .rangeRoundBands([padding, w-padding], .5); var yAxis = d3.svg.axis() .scale(yScale) .orient("left") .ticks(5) .innerTickSize(- (w - padding*2 ) ) .outerTickSize(0) .tickPadding(15); var xAxis = d3.svg.axis() .scale(xScale) .orient("bottom"); |
軸の幅の調整が難しい。 paddingは広めに取ってしまいました。
で、軸の定義をしておいて、
ここにデータをバインドしていきます。
|
1 2 3 4 |
var tooltip = d3.select("body") .append("div") .attr("class", "tooltip") .style("position", "absolute"); |
こちらはツールチップの定義。
ここから、実際に軸とグラフを描写していきます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
svg.append("g") .attr("class", "axis") .attr("transform", "translate(" + padding + ",0)") .call(yAxis) .append("text") .attr("transform", "rotate(0)") .attr("y", 40) .attr("dy", 0) .style("text-anchor", "end") .text("観戦者数"); svg.append("g") .attr("class", "axis") .attr("transform", "translate( 0 ,"+ (h-padding) + ")") .call(xAxis); svg.selectAll("rect") .data(json) .enter() .append("rect") .attr("class", "graf") .style("opacity", 0.7) .on("mouseover", function(){return tooltip.style("visibility", "visible");}) .on("mousemove", function(d){return tooltip .style("top", (event.pageY-180)+"px") .style("left",(event.pageX-80)+"px") .html("<div id ='mousemove'><ul><li>" + d.date + "</li><li>vs" + d.vs + d.scoa + "</li><li>観客動員数：" + d.att + "人</li><li>主審：" + d.referee + "</li></ul></div>")}) .on("mouseout", function(){return tooltip.style("visibility", "hidden");}) |
htmlの表示のさせ方はスマートじゃないなー。
マウスオーバーで、ツールチップを設定して、詳細な情報を表示させました。ポインターとツールチップが被ると、安定しないみたい。グラフ上で動かすと、点滅してるような感じになっちゃう。ポインターから離れていれば、安定するので、ポインターのちょい上に。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
.transition() .delay(500) .duration(1000) .each("start",function(){ d3.select(this) .attr({ height:0, y:h-padding }); }) .attr({ height:function(d){return h - yScale(d.att) - padding}, y:function(d){return yScale(d.att)}, width:xScale.rangeBand(), x:function(d) { return xScale(d.vs); } }); }); |
transitionをいじってる時が一番楽しい。
にゅるっと動かすにはもうちょっと研究が必要かな。
満足いく出来には程遠いけど、今回はこんなもんでしょうｗ
コメントは受け付けていません。