|
|
| Line 18: |
Line 18: |
| | | |
| | | |
| <!--Blue Line via D3.js--> | | |
| <div >
| |
| <script>
| |
| 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>
| |
| </div>
| |
| | |
| | |
| <!--Green Rectangle via D3.js-->
| |
| <div id = "D3GreenRectangle">
| |
| <script>
| |
| var width = 300;
| |
| var height = 300;
| |
| var svg = d3.select("#D3BlueLine")
| |
| .append("svg")
| |
| .attr("width", width)
| |
| .attr("height", height);
| |
| svg.append("rect")
| |
| .attr("x", 20)
| |
| .attr("y", 20)
| |
| .attr("width", 200)
| |
| .attr("height", 100)
| |
| .attr("fill", "green");
| |
| </script>
| |
| </div>
| |
| | |
| <!--Green Rectangle via D3.js-->
| |
| <div id = "D3GreenRectangle">
| |
| <script>
| |
| var width = 300;
| |
| var height = 300;
| |
| 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>
| |
| </div>
| |
| | |
| | |
|
| |
|
| </body> | | </body> |
| </html> | | </html> |
<html>
<head>
<script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
<style>
body { font-family: Arial; }
</style>
</head>
<body>
<svg>
<rect width="300" height="300" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)"></rect>
<circle cx="300" cy="100" r="80" fill="orange" stroke="black" stroke-width="4"></circle>
</svg>
<svg >
<rect width="200" height="80">
</svg>
</body>
</html>