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

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

ただいまの
回答率

87.59%

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

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 1,493

score 28

d3.jsでアニメーション表示させた棒グラフにtooltipで売上データを表示させたいのですが、
「Uncaught Error: unknown type: mouseover」とconsole.logでエラー表示され、tooltipが表示されません。
d3.jsバージョン5です。

        var width=700;
        var height=600;
        var BAR_W = 20;
        var BAR_PADDING = 1;
        var W_PADDING = 25;
        var H_PADDING = 10;

        //一度削除
        //d3.select("body").selectAll("svg").remove();
        //d3.select("svg").remove();
        var svg=d3.select("body").append("svg").attr("width",width).attr("height",height);

        var padding=30;

        //tooltip用div要素追加
        var tooltip=d3.select("body").append("div").attr("class","tooltip");

        if(a2=="rui"){
        var xScale=d3.scaleBand()
            .rangeRound([padding,width-padding])
            .padding(0.1)
            .domain(dataset.map(function(d){return d.NENDO}));
        }else if(a2=="quater") {

        }

        var yScale=d3.scaleLinear()
                    .domain([0,d3.max(dataset,function(d){return d.GURI;})])
                    .range([height-padding,padding]);    //最小値,最大値

        var axisx=d3.axisBottom(xScale);    //X軸
        var axisy=d3.axisLeft(yScale);        //Y軸

        svg.append("g")
            .attr("transform","translate("+0+","+(height-padding)+")")
            .call(axisx);    //X軸

        svg.append("g")
            .attr("transform","translate("+padding+","+0+")")
            .call(axisy);    //Y軸

        //棒グラフの作成
        svg.append("g")
            .selectAll("rect")
            .data(dataset)
            .enter()
            .append("rect")
            .attr("x",function(d,i){
                //dがデータ,iが添え字
                //棒グラフのx開始点をずらす
                //棒グラフがくっつかないようにする
                return xScale(d.NENDO);
            })
A----------------------------------------------------------------------------
            .attr("height",-50)    //高さ-50でX軸からグラフが立ち上がる。
            .attr("y",height+H_PADDING+10)    //y側の位置
            .transition()
            .duration(500)
            .delay(function(d,i){
                return i*50;
            })
--------------------------------------------------------------------------------
        .attr("y",function(d,i){
                //開始点を全体の高さから引いた値とする
                return yScale(d.GURI);
            })
        .attr("width",xScale.bandwidth())
            .attr("height",function(d){return height-padding-yScale(d.GURI);})
            .attr("fill","steelblue")
            .attr("class","bar")
        //3.マウス&タッチイベント設定
            .on("mouseover",function(d){
                tooltip
                    .style("visibility","visible")
            //正規表現でカンマをつける。
                    .html("年度:"+d.NENDO+"<br />売上:"+String(d.GURI).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1,'));
            })
            .on("mousemove",function(d){
                tooltip
                    .style("top",(d3.event.pageY-20)+"px")
                    .style("left",(d3.event.pageX+10)+"px");
            })
            .on("mouseout",function(d){
                tooltip.style("visibility","hidden");
            });
    }
//tooltip
.tooltip{
    position:absolute;
    text-align:center;
    width:auto;
    width:auto;
    height:auto;
    padding:5px;
    font:12px;
    background-color:#FFFFFF;
    box-shadow: 0px 0px 20px rgba(0,0,0,0.8);
}
.bar:hover{
    cursor:pointer;
    fill:Brown;
}

以上のように記述すると、アニメーション表示して棒グラフ表示されるのですが、
"----"で囲ったAの部分を削除するとアニメーションはなくなりますが、棒グラフは表示されてtooltipも
表示されます。

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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • m.ts10806

    2019/01/28 12:29

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

    キャンセル

  • manabunbun

    2019/01/28 13:05

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

    キャンセル

回答 1

check解決した方法

0

自己解決しました。

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


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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

  • ただいまの回答率 87.59%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る