Widget:CharlesSVG: Difference between revisions
No edit summary |
No edit summary |
||
| Line 35: | Line 35: | ||
</script> | </script> | ||
</div> | </div> | ||
<!--Green Rectangle via D3.js--> | <!--Green Rectangle via D3.js--> | ||
<div id = "D3GreenRectangle"> | |||
<script> | <script> | ||
var width = 300; | var width = 300; | ||
var height = 300; | var height = 300; | ||
//Create SVG element | //Create SVG element | ||
var svg = d3.select("# | var svg = d3.select("#D3BlueLine") | ||
.append("svg") | .append("svg") | ||
.attr("width", width) | .attr("width", width) | ||
| Line 53: | Line 55: | ||
.attr("fill", "green"); | .attr("fill", "green"); | ||
</script> | </script> | ||
</div> | |||
<!-- | <!--Yellow Circle via D3.js--> | ||
<div id = "D3YellowCircle"> | |||
<script> | <script> | ||
var width = 300; | var width = 300; | ||
var height = 300; | var height = 300; | ||
//Create SVG element | //Create SVG element | ||
var svg = d3.select("# | var svg = d3.select("#D3GreenRectangle") | ||
.append("svg") | .append("svg") | ||
.attr("width", width) | .attr("width", width) | ||
| Line 68: | Line 72: | ||
.attr("cy", 50) | .attr("cy", 50) | ||
.attr("r", 20) | .attr("r", 20) | ||
.attr("fill", " | .attr("fill", "yellow"); | ||
</script> | </script> | ||
Revision as of 15:20, 31 October 2023
<html>
<head>
<script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
<style>
body { font-family: Arial; }
</style>
</head>
<body>
<svg width = "300" height = "300">
<line x1 = "100" y1 = "100"
x2 = "200" y2 = "200" style = "stroke:rgb(255,0,0);
stroke-width:2"/>
</svg>
<script language = "javascript">
var width = 300;
var height = 300;
var svg = d3.select("#svgRedLine")
.append("svg")
.attr("width", width)
.attr("height", height);
svg.append("line")
.attr("x1", 200)
.attr("y1", 100)
.attr("x2", 100)
.attr("y2", 200)
.style("stroke", "rgb(0,0,255)")
.style("stroke-width", 2);
</script>
<script>
var width = 300;
var height = 300;
//Create SVG element
var svg = d3.select("#D3BlueLine")
.append("svg")
.attr("width", width)
.attr("height", height);
//Create and append rectangle element
svg.append("rect")
.attr("x", 20)
.attr("y", 20)
.attr("width", 200)
.attr("height", 100)
.attr("fill", "green");
</script>
<script>
var width = 300;
var height = 300;
//Create SVG element
var svg = d3.select("#D3GreenRectangle")
.append("svg")
.attr("width", width)
.attr("height", height);
//Append circle
svg.append("circle")
.attr("cx", 200)
.attr("cy", 50)
.attr("r", 20)
.attr("fill", "yellow");
</script>
</body>
</html>