Upload
finigan-joyce
View
17
Download
1
Embed Size (px)
DESCRIPTION
SVG
Citation preview
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