2015/6/23 CreatinganSVGfilewithD3andNode.js|robballou

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

robballouMainmenu

Skiptocontent

HomeAboutCodeBlogRacingContact

Postnavigation

TurkeyWeekendAdventureKeepingcontext

CreatinganSVGfilewithD3andNode.jsPostedon2013/12/20byrballou

Onarecentworkproject,wewereusingtheD3librarytocreatesomegraphs.ButthegraphswereonapagethatwealsoneededtoexporttoPDFandsoweneededsomestaticversionsofthosegraphstousewithatag.Atfirst,Ithoughtthiswasgoingtorequireusingadifferentcommandlinelibrarythatcouldhelpgeneratethesamefilebutwasnthappywiththeprospectoftwoseparatecodelibrariestogetthesamegraphing.

SincewereJavaScripttomakethegraphs,letsseeifwecanrunthatgraphingcodewithNode.jsandsavethatoutputtoafile.Anditturnsoutthisisfairlysimple.

First,weneedtogetNodesetupwithafewpackages.Wellneed:d3andxmldom.

Next,welltakestartwiththisexampledoughnutgraph.Sowelltakethatcodeandloaditintoascriptwecanusewithnode:

12345678910111213141516

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);

6341http://robballou.com/2013/creating-an-svg-file-with-d3-and-node-js/

2015/6/23 CreatinganSVGfilewithD3andNode.js|robballou

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

viewraw

171819202122232425262728293031

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

Thiswillrunthegraphcodeforusinnodewhenwerun:nodegraph.js.Butwestillwantthissavedoutintoafile.Thisiswherexmldomcomesintoplay:

1234567891011121314151617181920212223242526272829303132333435363738

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);//getareferencetoourSVGobjectandaddtheSVGNSvarsvgGraph=d3.select('svg').attr('xmlns','http://www.w3.org/2000/svg');varsvgXML=(newxmldom.XMLSerializer()).serializeToString(svgGraph[0][0]);fs.writeFile('graph.svg',svgXML);

2015/6/23 CreatinganSVGfilewithD3andNode.js|robballou

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

viewrawgraph.jshostedwithbyGitHub

Thesecondscriptissimilartothefirst,butweveaddthexmldommodulesowecanserializetheobjecttoXMLandaddedfsmodulesowecansavethedatatoafile.

Andyouredone!Well,kinda.ThiswilllikelysavetheSVGfilewithcapitalizedXMLtags,whichyouwillhavetoconverttolowercasetohaveaworkingSVGfile:http://stackoverflow.com/questions/20693235/getlowercasetagnameswithxmldomxmlserializerinnodejs/20704228

ThisentrywaspostedinBlogandtaggedd3,javascript,node.js,programming,svg,tech,webdev.Bookmarkthepermalink.

Postnavigation

TurkeyWeekendAdventureKeepingcontext

WebDevLinks

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

Photos

Servicecurrentlyunavailable(SiteDisabled)

AboutBlogRacingContact

Copyright2015RobBallou