Q&A
###発生している問題
JavaScriptの勉強をしています。
<svg>環境の大きさを、横500、縦200にしたいのですが、なぜかコードが反映されません。
お手本の通りであればChromeのコンソールで確認した時「<svg width="500" height="200"></svg>」のようになるはずですが、自分の場合は「<svg></svg>」のままです。
コンソールの「<svg></svg>」の部分にカーソルを当てて大きさを確認してみると、300×150でした。
File->Saveで上書き保存してChromeで再読み込みしても結果は変わらず、特にエラーも出てきません。
JavaScriptに関しては初心者で、色々と調べても埒が明かず完全に手詰まりの状態です。
どうか皆様の知恵をお貸しください。
###前提
ドットインストールの3D.js入門/#09 SVG領域を設定してみようで勉強しています。
sublimeText3のhtmlモードで下記のソースコードを記述、「test.thml」という名前でデスクトップに保存し、Google Chromeで開きました。
Chromeのバージョンは「51.0.2704.103 m」です。
###該当のソースコード
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Webの練習</title> </head> <body> <!-- ネットがつながってる環境なら、下の1行を書くだけでD3.jsが使える --> <script src="https://d3js.org/d3.v4.min.js"></script> <script> var dataSet = [11, 22, 33, 12, 23]; var w = 500; var h = 200; var svg = d3.select("body").append("svg").attr({width:w,height:h}); </script> </body> </html>
回答1件
0
ベストアンサー
D3.jsはごく最近v4にアップデートしたようで、
ドットインストールで使われているバージョンと差があることが一番の理由です。
ドキュメントのselection.attr(name[, value])の項目を見ると、
v3のものには
name can also be an Object of name and value attributes.
と引数にオブジェクトを渡せることが記されていますが、
最新版をみると記載がありません。
解決策としては2通りで、
ひとつは
javascript
1var svg = d3.select("body").append("svg").attr('width':w).attr('height':h);
のようにチェーンでつなげる方法。
もうひとつは、ソースコードにある
html
1<script src="https://d3js.org/d3.v4.min.js"></script>
こちらの"v4"を下記のように"v3"に変更することで動くはずです。
html
1<script src="https://d3js.org/d3.v4.min.js"></script>
投稿2016/06/30 12:41
総合スコア71
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/06/30 16:39