├── .gitignore ├── README.md ├── bundle.js ├── index.html └── js ├── main.js └── package.json /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | *.log 3 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # svg2d3 [live demo](http://billautomata.github.io/svg2d3/) 2 | 3 | Crawls an svg file and outputs the correct d3 code to render it. 4 | 5 | Once you have the d3 code you can then make it interactive or incorporate the calls into your current application, letting you use complex resources without having to keep them in separate svg files. 6 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 35 | 36 | 37 | 38 | 39 | 40 | 41 |

svg2d3

42 |
43 |

Paste your SVG text in the box below and click convert.

44 |

Your d3.js code will be generated from the SVG data.

45 |

Then the d3.js code will be run using javascript's eval() method to actually render your SVG.

46 |

Finally the code is then appended to the bottom of the page.

47 |

Please report any bugs to github issues.

48 | 49 |
50 | 63 |
64 |
65 | 66 | 67 | 68 | 69 | 70 | 71 | -------------------------------------------------------------------------------- /js/main.js: -------------------------------------------------------------------------------- 1 | var d3 = require('d3') 2 | 3 | window.onload = function(){ 4 | d3.select('#clicker').on('click',function(){ 5 | var svgtxt = d3.select('textarea').node().value 6 | console.log(svgtxt) 7 | created3(svgtxt) 8 | }) 9 | } 10 | 11 | function created3(svg_text){ 12 | 13 | window.oParser = new DOMParser() 14 | window.oDom = window.oParser.parseFromString(svg_text, 'text/xml') 15 | 16 | var flat_list = [] 17 | recurse(window.oDom, 0) 18 | 19 | // console.log(JSON.stringify(flat_list,null,2)) 20 | 21 | flat_list.forEach(function(element,idx,arry){ 22 | if(element.level > 0){ 23 | 24 | // move from the current index to zero 25 | // until you find an element whose level is 1 less than yours 26 | 27 | console.log(element) 28 | console.log(idx) 29 | 30 | for(var crawl_idx = idx; crawl_idx >= 0; crawl_idx--){ 31 | if(arry[crawl_idx].level < element.level){ 32 | element.parent_idx = crawl_idx 33 | element.parent_tag = arry[crawl_idx].tagName 34 | crawl_idx = -1 35 | } 36 | } 37 | } 38 | }) 39 | 40 | var codelines = [] 41 | 42 | flat_list.forEach(function(e,idx){ 43 | 44 | // generate d3 code 45 | // identifier var name is the tagname+idx 46 | var identifier = e.tagName+'_'+idx 47 | var parent_identifier 48 | 49 | if(e.level > 0){ 50 | parent_identifier = e.parent_tag + '_' + e.parent_idx 51 | } else { 52 | parent_identifier = 'container' 53 | } 54 | 55 | codelines.push(';var ' + identifier + ' = ' + parent_identifier +'.append(\''+e.tagName+'\')') 56 | 57 | e.attrs.forEach(function(attr){ 58 | if(attr.name !== 'xmlns:xlink'){ 59 | codelines.push('.attr(\'' + attr.name + '\',\'' + attr.value + '\')') 60 | } 61 | }) 62 | 63 | }) 64 | 65 | // codelines.forEach(function(e){console.log(e)}) 66 | 67 | var container = d3.select('body').append('div') 68 | eval(codelines.join('\n')) 69 | 70 | d3.select('body').append('div').attr('class','d3code').append('textarea').attr('rows',codelines.length+4).text(codelines.join('\n')) 71 | 72 | function recurse(d, level){ 73 | 74 | // console.log(typeof d) 75 | // console.log(d.length) 76 | // console.log(Object.keys(d)) 77 | // console.log(d) 78 | // console.log(d.children.length) 79 | 80 | if(d.childNodes){ 81 | d.children = d.childNodes 82 | } 83 | 84 | console.log('child') 85 | console.log(d.children) 86 | 87 | for(var i = 0; i < d.children.length; i++){ 88 | // console.log(d.children[i]) 89 | // console.log(d.children[i].attributes) 90 | 91 | console.log(level, d.children[i].tagName) 92 | 93 | var this_child = { 94 | level: level, 95 | tagName: d.children[i].tagName, 96 | attrs: [] 97 | } 98 | 99 | if(d.children[i].attributes !== undefined){ 100 | for(var j = 0; j < d.children[i].attributes.length; j++){ 101 | var attr = d.children[i].attributes[j] 102 | console.log('attr=',attr.nodeName,attr.nodeValue) 103 | this_child.attrs.push({name: attr.nodeName, value: attr.nodeValue}) 104 | } 105 | } 106 | 107 | flat_list.push(this_child) 108 | 109 | recurse(d.children[i], level+1) 110 | 111 | } 112 | 113 | } 114 | 115 | return; 116 | 117 | } 118 | -------------------------------------------------------------------------------- /js/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "js", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "main.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1", 8 | "build_dev": "browserify -d -t brfs main.js -o ../bundle.js &> browserify.log" 9 | }, 10 | "author": "", 11 | "license": "ISC", 12 | "dependencies": { 13 | "brfs": "^1.4.0", 14 | "d3": "^3.5.5", 15 | "moment": "^2.9.0", 16 | "underscore": "^1.8.2", 17 | "xmltojson": "^1.1.0" 18 | } 19 | } 20 | --------------------------------------------------------------------------------