htmlのため、エラーメッセージなどは出ませんが、グラフを表示した時に横軸の目盛り、縦軸の目盛り、また項目目盛りが表示されません。おそらく下の###部分が間違っていると思うのですが、改変してみてもうまくいきません。
```JavaScriptここに言語を入力
var svgWidth = 320 //svg要素の幅
var svgHeight = 320; //svg要素の高さ
var xOffset = 40; //X座標のずれ具合
var yOffset = 10; //Y座標のずれ具合
var bar; //棒グラフの棒の要素を格納
var arrData = [120,80,150,200,110,260,220,40,100]; var maxNum = 300; var barWidth = 20; var barMargin = 5; //棒グラフを描画 bar = d3.select("#graph") .selectAll("rect") .data(arrData); bar.enter() .append("rect") .attr("class", "fillPink") //アニメーションの初期値0を設定 .attr("height",0) .attr("width",barWidth) .attr("x",function(d,i){ return i * (barWidth + barMargin) + xOffset; }) //グラフの一番下に座標を設定 .attr("y", svgHeight - yOffset ) //アニメーションをする .transition() .duration(1200) /* 縦棒グラフの左側から アニメーションを開始するように設定する */ .delay(function(d,i){ return i * 120; }) .attr("y",function(d,i){ //Y座標を指定 return svgHeight - d - yOffset; //Y座標を計算 }) .attr("height",function(d,i){ return d; }) //棒グラフの数値を描画する bar.enter() //text要素を指定 .append("text") //text要素を追加 .attr("class","barNum") //CSSクラスを指定 .attr("x",function(d,i){ //X座標を指定 return i * (barWidth + barMargin) + 10 + xOffset; //棒グラフの表示間隔に合わせる }) .attr("y", svgHeight -5 - yOffset )//Y座標を指定 .text(function(d,i){ //データを表示 return d; }); //目盛り表示の為の縮尺表示 var yScale = d3.scale.linear() .domain([0,maxNum]) .range([maxNum,0]); d3.select("#graph") .append("g") .attr("class","axis") .attr("transform", "translate(" + xOffset + ", " + ((svgHeight - 300)- yOffset) + ")") .call( d3.svg.axis() .scale(yScale) .orient("left") ###.ticks(20) ###.tickValues( [10.50,30.36,50,100,200,300] ) ###.tickFormat(d3.format(".2f")) ); //横方向の線を表示する d3.select("#graph") .append("rect") .attr("class","axisX") .attr("width",300) .attr("height",1) .attr("transform","translate(" + xOffset + ", " + (svgHeight - yOffset ) + ")" ); //棒のラベルを表示する bar.enter() .append("text") .attr("class","barName") .attr("x",function(d,i){ return i * 25 + 10 + xOffset; }) .attr("y", svgHeight - yOffset + 15 ) ###.text(function(d,i){ ###return ["A","B","C","D","E","F","G","H","I"][i]; });
引用元 > http://vesna-memo.com/?p=1102
あなたの回答
tips
プレビュー