Q&A
前提・実現したいこと
下記の該当のソースコードを実行し、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")
回答1件
0
ベストアンサー
svgはcreateElementではないと思いますが・・・
javascript
1 var svg= document.createElementNS('http://www.w3.org/2000/svg', 'svg');
投稿2020/06/10 04:18
総合スコア116724
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/06/10 06:49