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

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

ただいまの
回答率

91.35%

  • JavaScript

    11205questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    6162questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • D3.js

    62questions

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

D3.jsを用いた棒グラフ作成

受付中

回答 0

投稿 2017/12/04 16:28 ・編集 2017/12/04 17:18

  • 評価
  • クリップ 0
  • VIEW 57

takunii925

score 3

htmlのため、エラーメッセージなどは出ませんが、グラフを表示した時に横軸の目盛り、縦軸の目盛り、また項目目盛りが表示されません。おそらく下の###部分が間違っていると思うのですが、改変してみてもうまくいきません。

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

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

質問への追記・修正の依頼

  • mts10806

    2017/12/04 16:48

    プログラムコード(およびエラーメッセージ)は```で囲ってください。(わからなければ質問編集画面でコード部分を選択し<code>ボタンを押してください)正しく反映されているかどうかは質問編集画面のプレビューを見ながら編集していってください。また、エラーメッセージなど表示されていたらそれを、やってみたこと調べてみたことをきちんと書いてください。

    キャンセル

  • mts10806

    2017/12/04 17:14

    コードブロック内ではそのほかのマークダウン記法は反映されません。何か分かりやすいようにコメントをつけるようにしてください。(通常、質問編集画面の右側にプレビューが表示されるので、それを見ながら調整すると良いです)

    キャンセル

  • kentei_syunrai

    2017/12/09 19:53

    改変したら動かないという話ですか? 引用元のサイトでは.ticks(20)の件はコメントアウトされているように見えますが。。

    キャンセル

まだ回答がついていません

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

ただいまの回答率

91.35%

関連した質問

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

  • JavaScript

    11205questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    6162questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • D3.js

    62questions

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