Menu
I'm attempting to add a legend to a graph, and I want to append it to my chart div. Right now I'm using the following code, which appends the legend to the "body". I would like to instead append it to my "chart" div, so that I can create a footer after my legend. Right now the HTML page is processed first, and then my d3 javascript file gets run and therefore the legend gets placed below my footer. Thank you in advance.
// Create the svg drawing canvas...
var canvas = d3.select("body")
.append("svg:svg")
.attr("width", 300)//canvasWidth)
.attr("height", 300);//canvasHeight);
899
Ways to use D3.You could use D3. js entirely for its functional purpose – to transform data that you can then position onto your canvas as you see fit. You could also use D3. js with some dummy HTML nodes to capture lifecycle selections and then repainting the canvas when the data changes.
append() method We can add a new HTML element in D3. js by using the append() method. It creates a new HTML element and inserts it at the end of the selected element. Let's create a new div element inside the body tag and add text to it using the text() method.
D3 charts are most often rendered using SVG, a retained mode graphics model, which is easy to use, but performance is limited. SVG charts can typically handle around 1,000 datapoints. Since D3 v4 you've also had the option to render charts using canvas, which is an immediate mode graphics model.
SVG stands for Scalable Vector Graphics. SVG is an XML-based vector graphics format. It provides options to draw different shapes such as Lines, Rectangles, Circles, Ellipses, etc. Hence, designing visualizations with SVG gives you more power and flexibility.
The following works, like I pointed out in the comment.
var canvas = d3.select("#chart")
.append("svg:svg")
.attr("width", 300)//canvasWidth)
.attr("height", 300);//canvasHeight);
Cheers :)
200
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
