2015/6/23

CreatinganSVGfilewithD3andNode.js|robballou

robballou
Mainmenu
Skiptocontent
Home
About
Code
Blog
Racing
Contact

Postnavigation
TurkeyWeekendAdventure
Keepingcontext

CreatinganSVGfilewithD3andNode.js
Postedon2013/12/20byrballou
Onarecentworkproject,wewereusingtheD3librarytocreatesomegraphs.Butthegraphswereon
apagethatwealsoneededtoexporttoPDFandsoweneededsomestaticversionsofthosegraphsto
usewitha<img>tag.Atfirst,Ithoughtthiswasgoingtorequireusingadifferentcommandline
librarythatcouldhelpgeneratethesamefilebutwasnthappywiththeprospectoftwoseparatecode
librariestogetthesamegraphing.
SincewereJavaScripttomakethegraphs,letsseeifwecanrunthatgraphingcodewithNode.jsand
savethatoutputtoafile.Anditturnsoutthisisfairlysimple.
First,weneedtogetNodesetupwithafewpackages.Wellneed:d3andxmldom.
Next,welltakestartwiththisexampledoughnutgraph.Sowelltakethatcodeandloaditintoa
scriptwecanusewithnode:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

require('d3');
varxmldom=require('xmldom');

vardataset={
apples:[53245,28479,19697,24037,40245],
};

varwidth=460,
height=300,
radius=Math.min(width,height)/2;

varcolor=d3.scale.category20();

varpie=d3.layout.pie()
.sort(null);

http://robballou.com/2013/creatingansvgfilewithd3andnodejs/

1/3

2015/6/23

17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

CreatinganSVGfilewithD3andNode.js|robballou

vararc=d3.svg.arc()
.innerRadius(radius100)
.outerRadius(radius50);

varsvg=d3.select("body").append("svg")
.attr("width",width)
.attr("height",height)
.append("g")
.attr("transform","translate("+width/2+","+height/2+")");

varpath=svg.selectAll("path")
.data(pie(dataset.apples))
.enter().append("path")
.attr("fill",function(d,i){returncolor(i);})
.attr("d",arc);

graph.jshostedwithbyGitHub

viewraw

Thiswillrunthegraphcodeforusinnodewhenwerun:nodegraph.js.Butwestillwantthissaved
outintoafile.Thisiswherexmldomcomesintoplay:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

require('fs');
require('d3');
varxmldom=require('xmldom');

vardataset={
apples:[53245,28479,19697,24037,40245],
};

varwidth=460,
height=300,
radius=Math.min(width,height)/2;

varcolor=d3.scale.category20();

varpie=d3.layout.pie()
.sort(null);

vararc=d3.svg.arc()
.innerRadius(radius100)
.outerRadius(radius50);

varsvg=d3.select("body").append("svg")
.attr("width",width)
.attr("height",height)
.append("g")
.attr("transform","translate("+width/2+","+height/2+")");

varpath=svg.selectAll("path")
.data(pie(dataset.apples))
.enter().append("path")
.attr("fill",function(d,i){returncolor(i);})
.attr("d",arc);

//getareferencetoourSVGobjectandaddtheSVGNS
varsvgGraph=d3.select('svg')
.attr('xmlns','http://www.w3.org/2000/svg');
varsvgXML=(newxmldom.XMLSerializer()).serializeToString(svgGraph[0][0]);
fs.writeFile('graph.svg',svgXML);

http://robballou.com/2013/creatingansvgfilewithd3andnodejs/

2/3

2015/6/23

CreatinganSVGfilewithD3andNode.js|robballou

graph.jshostedwithbyGitHub

viewraw

Thesecondscriptissimilartothefirst,butweveaddthexmldommodulesowecanserializethe
objecttoXMLandaddedfsmodulesowecansavethedatatoafile.
Andyouredone!Well,kinda.ThiswilllikelysavetheSVGfilewithcapitalizedXMLtags,which
youwillhavetoconverttolowercasetohaveaworkingSVGfile:
http://stackoverflow.com/questions/20693235/getlowercasetagnameswithxmldomxmlserializer
innodejs/20704228
ThisentrywaspostedinBlogandtaggedd3,javascript,node.js,programming,svg,tech,webdev.
Bookmarkthepermalink.

Postnavigation
TurkeyWeekendAdventure
Keepingcontext

WebDevLinks
HTML_CodeSniffer2015/06/08
GenerateMozillaSecurityRecommendedWebServerConfigurationFiles2015/05/14
AccessibilitytestingfromPayPal2015/05/05
Mina2015/05/04
jq2015/04/27

Photos
Servicecurrentlyunavailable(SiteDisabled)
About
Blog
Racing
Contact
Copyright2015RobBallou

http://robballou.com/2013/creatingansvgfilewithd3andnodejs/

3/3