質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

D3.js

D3.jsとは、データに基づいてHTMLやSVGドキュメントを編集するために作られた、小規模なオープンソースのJavaScript可視化ライブラリです。

Q&A

解決済

1回答

2441閲覧

d3.jsでアニメーション表示させた棒グラフにtooltipで売上データを表示させたい

manabunbun

総合スコア39

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

D3.js

D3.jsとは、データに基づいてHTMLやSVGドキュメントを編集するために作られた、小規模なオープンソースのJavaScript可視化ライブラリです。

0グッド

0クリップ

投稿2019/01/28 03:19

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も
表示されます。

アニメーションさせるとマウスイベントが取得できないのでしょうか。
よろしくお願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2019/01/28 03:29

インデントが揃ってるか見づらいのであれですが、.on自体はどこにイベント付与しようとしていますか?
manabunbun

2019/01/28 04:05

svg.append("g")になると思います。
guest

回答1

0

自己解決

自己解決しました。

d3.js

1**.attr("height",-50) //高さ-50でX軸からグラフが立ち上がる。 2 .attr("y",height+H_PADDING+10) //y側の位置** 3 //3.マウス&タッチイベント設定 4 .on("mouseover",function(d){ 5 tooltip 6 .style("visibility","visible") 7 //正規表現でカンマをつける。 8 .html("年度:"+d.NENDO+"<br />売上:"+String(d.GURI).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1,')); 9 }) 10 .on("mousemove",function(d){ 11 tooltip 12 .style("top",(d3.event.pageY-20)+"px") 13 .style("left",(d3.event.pageX+10)+"px"); 14 }) 15 .on("mouseout",function(d){ 16 tooltip.style("visibility","hidden"); 17 }) 18 .transition() 19 .duration(500) 20 .delay(function(d,i){ 21 return i*50; 22 })

mts10806さんの言われたことをヒントに
.onイベントを.attr("height",-50)の部分、アニメーションするところへ記述してやれば、うまくtooltipが表示されました。
ありがとうございました。

投稿2019/01/28 08:01

manabunbun

総合スコア39

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問