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

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

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

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

JavaScript

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

Ruby on Rails 4

Ruby on Rails4はRubyによって書かれたオープンソースのウェブフレームワークです。 Ruby on Railsは「設定より規約」の原則に従っており、効率的に作業を行うために再開発を行う必要をなくしてくれます。

Q&A

解決済

2回答

2291閲覧

Railsを使った、D3.jsでJSON形式のデータが読み込めない件について

k.yamada920

総合スコア19

D3.js

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

JavaScript

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

Ruby on Rails 4

Ruby on Rails4はRubyによって書かれたオープンソースのウェブフレームワークです。 Ruby on Railsは「設定より規約」の原則に従っており、効率的に作業を行うために再開発を行う必要をなくしてくれます。

0グッド

0クリップ

投稿2016/08/02 08:45

編集2016/08/02 10:35

RailsのデータベースからJSON形式でデータを取得し、D3.jsで棒グラフを表示したい
のですが、javaScriptの記述でエラーとなってしまい、グラフを表示することができません。
JSはあまり知識が無いためどのような記述が誤りがあるのかご教示いただければ幸いです。

###発生している問題・エラーメッセージ

Uncaught ReferenceError: data is not defined

エラーが出る箇所
for(var i=0,l=data.length;i<l;i++){

###該当のソースコード
views/profile/index.html.erb

<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/pure-min.css"> <link rel="stylesheet" href="https://rawgit.com/tpreusse/radar-chart-d3/master/src/radar-chart.css"> <script src="http://d3js.org/d3.v3.js"></script> <svg id="graph"></svg> <style> svg{ width:320px; height:240px; border:2px solid black; } rect{fill:green;} .fillPink{fill:blue;} </style> <script> var arrData = <%== @profile.to_json %> for(var i=0,l=data.length;i<l;i++){ arrData.push(data[i].Ex[0]); } d3.select("#graph") .selectAll("rect") .data(arrData) .enter() .append("rect") .attr("class","fillPink") .attr("width",function(d,i){ return d; }) .attr("height",16) .attr("x",0) .attr("y",function(d,i){ return i * 24 }) </script>?>

※@profileの中身のデータ
@profile.to_json={"id":1,"Ex":26,"Co":27,"Sin":30,"Em":23,"Intel":37,"Att":25,"F":22}

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

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

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

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

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

kei344

2016/08/02 08:46

コードはコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「</>」ボタンを押すとコードブロックになります。
guest

回答2

0

ベストアンサー

JavaScript

1 var arrData = []; 2 var data = <%== @profile.to_json %> 3 for(var i=0,l=data.length;i<l;i++){ 4 arrData.push(data[i].Ex[0]); 5 }

追記:

JavaScript

1var arrData = []; 2var data = <%== @profile.to_json %> 3for ( var key in data ) { 4 if ( key === 'id' ) { continue; }; 5 arr.push( { name: key, value: data [ key ] } ); 6}

投稿2016/08/02 10:38

編集2016/08/02 12:35
kei344

総合スコア69364

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

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

k.yamada920

2016/08/02 11:13

回答ありがとうございます。記載の通り修正しエラーは解消されたのですが何故か、棒グラフが表示されませんでした。
kei344

2016/08/02 12:26

あ、jsonの中身書いておられたのですね、見落としていましたすいません。そのJSONの構造ではそもそも違う書き方をする必要があるのでは?
k.yamada920

2016/08/02 14:01

回答ありがとうございます。恐らくRailsのデータベースからto_jsonで引っ張ってきた中身の記述が対応できないのかもしれません。違うやりかたで一度、試してみます。ヒントありがとうございます。
kei344

2016/08/02 14:26

回答の追記部分に「多分こういう形でD3.jsに渡す」と言う例を載せてありますが、動きませんでしたか?
k.yamada920

2016/08/03 01:35

arrだとエラーでしたので、arrData.push(...に修正しましたが、Error: <rect> attribute width: Expected length, "[object Object]".このようなエラーが出て表示はできませんでした。
kei344

2016/08/03 06:07

> .attr("width",function(d,i){ > return d.value; > }) これで試してみてください。
guest

0

単純に、dataという変数には何も入っていないだけではないでしょうか。
arrData.lengthの間違いでは?

投稿2016/08/02 09:48

編集2016/08/02 09:49
退会済みユーザー

退会済みユーザー

総合スコア0

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

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

k.yamada920

2016/08/02 10:37

回答ありがとうございます。dataの部分をarrDataに修正しましたが、できませんでした
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問