#2: Functions As Attributes

This example demonstrates how you can use functions instead of literals to set the attributes of nodes.

Each property is set to the returned value of the function. However, notice that if you resize the window, the circle doesn't change position.

Also the svg object wer're using is technically is a SVG Group Element, which is a wrapper much like a div in HTML.

This svg object, as well as the margin object and width & height properties are set in javascript as part of a initialization block which is the same for every example on this site, so we're hiding it. They're not not part of the D3 library; however, they are very much a standard practice and almost all examples you find will use the convention.

This Example's Code

This code block is preceded by initialization code that defines parent, svg, margin, width, & height.

This Example's Data