How to append svg to the page using d3.js?

@scotty_walker 

To append an SVG element to a webpage using d3.js, you can follow these steps:

1. Create an SVG element using the d3.select method and specify the container where you want to append the SVG element. For example:

1
2
3
4

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

1. You can then append various SVG elements such as rectangles, circles, lines, etc. to the SVG container using the append method. For example, to append a rectangle to the SVG element:

1
2
3
4
5
6

svg.append("rect")
   .attr("x", 50)
   .attr("y", 50)
   .attr("width", 100)
   .attr("height", 50)
   .style("fill", "blue");

1. You can also append text elements to the SVG container using the text method. For example:

1
2
3
4
5

svg.append("text")
   .attr("x", 200)
   .attr("y", 100)
   .text("Hello, D3!")
   .style("fill", "red");

1. Finally, you can customize the SVG elements by setting attributes such as x, y, width, height, fill, etc. and styles using the attr and style methods.

By following these steps, you can easily append SVG elements to a webpage using d3.js.