Graphics Reference
In-Depth Information
// Construct an svg element with a root group
anchored in the center
var
svg = d3.select(
'body'
).append(
'svg'
)
.attr(
'width'
, width)
.attr(
'height'
, height)
.append(
'g'
)
.attr(
'id'
,
'circle'
)
.attr(
'transform'
,
'translate('
+ width/2
+
','
+ height/2
+
')'
);
// Compute the chord layout from the matrix
var
layout = d3.layout.chord()
.padding(.04)
.sortSubgroups(d3.descending)
// clockwise
.sortChords(d3.ascending)
// layer-wise
.matrix(imports);
// ....
}
Note
The grammar of graphical construction in
d3.js
is based on SVG.
Creating new visualizations using
d3.js
requires a reasonably solid
understanding of the SVG standard. SVG is a low-level graphics format
that takes some time to learn. You will find that you can often get by
with minor modifications to the plentiful examples provided at
long run, it is worth the investment to learn SVG.
Now you are ready to begin creating the graphical elements. Start by
creating the arcs for each country around the perimeter of the circle. Create
an SVG group to parent them using the country groups produced by the
layout data.
