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

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

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

SVGは、XMLを基盤とした2Dベクター画像記述言語。画像を線・面といった図形の集合体として扱うベクター画像のため、環境に適した表示が可能です。アニメーション機能もサポートされており、簡単なインタラクティブコンテンツ作成もできます。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

HTML

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

Q&A

解決済

1回答

1376閲覧

svgにwidthとheightを指定しているが0になってしまう。

Daimian

総合スコア53

SVG

SVGは、XMLを基盤とした2Dベクター画像記述言語。画像を線・面といった図形の集合体として扱うベクター画像のため、環境に適した表示が可能です。アニメーション機能もサポートされており、簡単なインタラクティブコンテンツ作成もできます。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

HTML

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

0グッド

1クリップ

投稿2020/06/10 04:07

編集2020/06/10 04:09

前提・実現したいこと

下記の該当のソースコードを実行し、htmlをdevツールで確認すると、element上はsvgにwidthやheightが追加されていて、中に正しくcircleが挿入されていますが、なぜか表示上、svgがのwidth, heightが0,0になっています(下記画像参照)

イメージ説明

しかし、下記の試したこと内にある対処を行うと、うまく描画させることができます。
なぜこのような結果になるのか、原因がいまいち分からず、質問させていただく次第です。

該当のソースコード

html

1<!DOCTYPE html> 2<html> 3 4 <head> 5 <meta charset="utf-8"> 6 <title>hoge</title> 7 </head> 8 9 <body> 10 <div id="app"> 11 </div> 12 <script src="js/bundle.js"></script> 13 </body> 14 15</html>

javascript

1import * as d3 from "d3"; 2const WIDTH = 800; 3const HEIGHT = 600; 4 5const svg = document.createElement('svg'); 6svg.setAttribute('width', WIDTH); 7svg.setAttribute('height', HEIGHT); 8svg.setAttribute('xmlns', "http://www.w3.org/2000/svg"); 9svg.setAttribute('viewBox', "0 0 800 600"); 10 11const appElement = document.getElementById('app'); 12 13appElement.appendChild(svg); 14 15// nodesの生成数 16const NUMBER = 300; 17// 密着度 18const STRENGTH = 0; 19 20// 1. 描画用のデータ準備 21var nodesData = []; 22for(var i = 0; i < NUMBER; i++) { 23 nodesData.push({ 24 "x": 800 * Math.random(), 25 "y": 600 * Math.random(), 26 "r": 10 * Math.random() + 3 27 }); 28} 29 30// 2. svg要素を配置 31var node = d3.select("svg") 32.selectAll("circle") 33.data(nodesData) 34.enter() 35.append("circle") 36.attr("cx", function(d) { return d.x }) 37.attr("cy", function(d) { return d.y }) 38.attr("r", function(d) { return d.r }) 39.attr("fill", "#FFB6C1") 40.attr("stroke", "#4169E1") 41.attr("stroke-width", "0.3px")

試したこと

下記のように初めからsvgをhtml内に記述した場合、うまく描画されます。

html

1<!DOCTYPE html> 2<html> 3 4 <head> 5 <meta charset="utf-8"> 6 <title>hoge</title> 7 </head> 8 9 <body> 10 <svg width="800" height="600"></svg> 11 <script src="js/bundle.js"></script> 12 </body> 13 14</html>

javascript

1import * as d3 from "d3"; 2 3// nodesの生成数 4const NUMBER = 300; 5// 密着度 6const STRENGTH = 0; 7 8// 1. 描画用のデータ準備 9var nodesData = []; 10for(var i = 0; i < NUMBER; i++) { 11 nodesData.push({ 12 "x": 800 * Math.random(), 13 "y": 600 * Math.random(), 14 "r": 10 * Math.random() + 3 15 }); 16} 17 18// 2. svg要素を配置 19var node = d3.select("svg") 20.selectAll("circle") 21.data(nodesData) 22.enter() 23.append("circle") 24.attr("cx", function(d) { return d.x }) 25.attr("cy", function(d) { return d.y }) 26.attr("r", function(d) { return d.r }) 27.attr("fill", "#FFB6C1") 28.attr("stroke", "#4169E1") 29.attr("stroke-width", "0.3px")

うまく描画されます

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

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

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

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

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

guest

回答1

0

ベストアンサー

svgはcreateElementではないと思いますが・・・

javascript

1 var svg= document.createElementNS('http://www.w3.org/2000/svg', 'svg');

投稿2020/06/10 04:18

yambejp

総合スコア114572

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

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

Daimian

2020/06/10 06:49

名前空間に対する勉強不足でした。ありがとうございます!無事解決いたしました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問