|
|
| 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> |