D3.jsで円が表示できない

本日よりD3.jsを勉強しようと思い色々サンプルコードを写経して練習をしております。
チュートリアルを読みながら進めておりますが、うまくいかず困っております。

環境
Laravel.5.5
cloud9

welcome.blade.php

php
1<!DOCTYPE html>
2<html>
3  <head>
4    <meta charset="utf-8">
5    <title>D3 Test</title>
6    <script src="https://d3js.org/d3.v5.min.js"></script>
7  </head>
8  <body>
9    <svg width="500" height="500">
10    </svg>
11    <script>
12　　　<circle cx="25" cy="25" r="22"
13 　　　fill="yellow" stroke="orange" stroke-width="5"/>
14    </script>
15  </body>
16</html>

ご教授のほどよろしくお願い申し上げます。

HayatoKamono

2018/04/26 14:46

「質問するときのヒント」を熟読の上、質問文を修正すると、適切な回答が付きやすいかと思います。 https://teratail.com/help/question-tips

行動規範の内容に同意します

回答1件

私も今勉強中ですが。
svgを作成してから、図形(circle)を追加するイメージだったと思います。

var svg=select("body")
.append("svg")
.attr("width",500)
.attr("height",300);

//図形を追加
var circle=svg
.append("circle")
.attr('cx',100)
.attr('cy',100)
.attr('r',10)
.attr('fill,'#f0f');

でいかがでしょうか。

"https://ajike.github.io/D3.jsでグラフ実装~一行ずつ読み解く入門編~/#d3jsとは"
を参考にしました。

投稿2018/07/30 00:23