d3.jsでアニメーション表示させた棒グラフにtooltipで売上データを表示させたいのですが、
「Uncaught Error: unknown type: mouseover」とconsole.logでエラー表示され、tooltipが表示されません。
d3.jsバージョン5です。
jQuery
1 var width=700; 2 var height=600; 3 var BAR_W = 20; 4 var BAR_PADDING = 1; 5 var W_PADDING = 25; 6 var H_PADDING = 10; 7 8 //一度削除 9 //d3.select("body").selectAll("svg").remove(); 10 //d3.select("svg").remove(); 11 var svg=d3.select("body").append("svg").attr("width",width).attr("height",height); 12 13 var padding=30; 14 15 //tooltip用div要素追加 16 var tooltip=d3.select("body").append("div").attr("class","tooltip"); 17 18 if(a2=="rui"){ 19 var xScale=d3.scaleBand() 20 .rangeRound([padding,width-padding]) 21 .padding(0.1) 22 .domain(dataset.map(function(d){return d.NENDO})); 23 }else if(a2=="quater") { 24 25 } 26 27 var yScale=d3.scaleLinear() 28 .domain([0,d3.max(dataset,function(d){return d.GURI;})]) 29 .range([height-padding,padding]); //最小値,最大値 30 31 var axisx=d3.axisBottom(xScale); //X軸 32 var axisy=d3.axisLeft(yScale); //Y軸 33 34 svg.append("g") 35 .attr("transform","translate("+0+","+(height-padding)+")") 36 .call(axisx); //X軸 37 38 svg.append("g") 39 .attr("transform","translate("+padding+","+0+")") 40 .call(axisy); //Y軸 41 42 //棒グラフの作成 43 svg.append("g") 44 .selectAll("rect") 45 .data(dataset) 46 .enter() 47 .append("rect") 48 .attr("x",function(d,i){ 49 //dがデータ,iが添え字 50 //棒グラフのx開始点をずらす 51 //棒グラフがくっつかないようにする 52 return xScale(d.NENDO); 53 }) 54A---------------------------------------------------------------------------- 55 .attr("height",-50) //高さ-50でX軸からグラフが立ち上がる。 56 .attr("y",height+H_PADDING+10) //y側の位置 57 .transition() 58 .duration(500) 59 .delay(function(d,i){ 60 return i*50; 61 }) 62-------------------------------------------------------------------------------- 63 .attr("y",function(d,i){ 64 //開始点を全体の高さから引いた値とする 65 return yScale(d.GURI); 66 }) 67 .attr("width",xScale.bandwidth()) 68 .attr("height",function(d){return height-padding-yScale(d.GURI);}) 69 .attr("fill","steelblue") 70 .attr("class","bar") 71 //3.マウス&タッチイベント設定 72 .on("mouseover",function(d){ 73 tooltip 74 .style("visibility","visible") 75 //正規表現でカンマをつける。 76 .html("年度:"+d.NENDO+"<br />売上:"+String(d.GURI).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1,')); 77 }) 78 .on("mousemove",function(d){ 79 tooltip 80 .style("top",(d3.event.pageY-20)+"px") 81 .style("left",(d3.event.pageX+10)+"px"); 82 }) 83 .on("mouseout",function(d){ 84 tooltip.style("visibility","hidden"); 85 }); 86 }
CSS
1//tooltip 2.tooltip{ 3 position:absolute; 4 text-align:center; 5 width:auto; 6 width:auto; 7 height:auto; 8 padding:5px; 9 font:12px; 10 background-color:#FFFFFF; 11 box-shadow: 0px 0px 20px rgba(0,0,0,0.8); 12} 13.bar:hover{ 14 cursor:pointer; 15 fill:Brown; 16}
以上のように記述すると、アニメーション表示して棒グラフ表示されるのですが、
"----"で囲ったAの部分を削除するとアニメーションはなくなりますが、棒グラフは表示されてtooltipも
表示されます。
アニメーションさせるとマウスイベントが取得できないのでしょうか。
よろしくお願いします。
回答1件
あなたの回答
tips
プレビュー