Raphaël facilitates advanced animation via custom attributes . Custom attributes can be used to apply, or animate, multiple attributes on a particular element based on custom-defined logic.
A custom attribute is a custom-defined function that returns a set of attributes to be applied to an element. It can be thought of as a helper function for which existing attributes are derived based on calculation. A custom attribute is defined as an attribute of the customAttributes
namespace as follows:
Paper.customAttributes.yourAttribute = function(a1, a2, ...){};
Here, the a1
, a2
, ... arguments are numeric and yourAttribute
is the name of the custom attribute. A custom attribute can then be used in the same ways that we have used other element attributes so far.
As an example, consider that we need to represent population data using the following:
The radius of a circle to indicate relative population size
The color of a circle to indicate how densely...