D3-Transform
d3-transform makes it easy to define and reuse functions that produce transform attribute strings for SVG elements. Using d3-transform reduces repetition, allows you to compose multiple transforms, and eliminates ugly string-interpolation from your d3 visualization code.
Installation
Include d3-transform in your web page using a script tag any time after you've included d3:
Usage
d3-transform replaces the manual construction of transform attribute strings
for SVG elements. For example, if you want to translate, rotate, and scale a
group
element depending on the data bound to that element, you'd write
something like this without d3-transform:
d3 data size: 5 size: 10 ;
With d3-transform, you can rewrite the above code like this:
var transform = d3 ; var svg = d3 data size: 5 size: 10 ;
In both cases the resulting document will look the same:
You can specify arguments for these operations by either providing positional arguments to the corresponding method of the transform object, or by providing a function that will return an array of arguments that are interpreted as positional arguments. In the special case where an operation only takes one argument, your function can return a number.
All of the SVG 1.1 transform operations are supported: matrix
, rotate
,
translate
, scale
, skewX
, and skewY
. See the SVG 1.1 Specification
or MDN for further details on the arguments of each operation.
When using node.js, calls to require('d3-transform') return a direct reference to the "transform" method.
var d3 = ;var d3Transform = ; var transform = ; var svg = d3 data size: 5 size: 10 ;
Composition
If you want to extend one transform with another set of operations, pass the
initial transform object into the d3.transform()
function:
var transform1 = d3 ; var transform2 = d3 d3 data size: 5 size: 10 ;
Another way to compose multiple transform objects is to use the seq
operation:
var transform1 = d3 ; var transform2 = d3 var transform = transform1;
With either of these approaches, the result is a document that looks like this:
Contributors
- Erik Cunningham @trinary
- Spiros Eliopoulos @seliopou
- Micah Stubbs @micahstubbs