i've been experimenting svg, , wanted insert elements svg elements dynamically according data get.
so say, in data, have 2 rows, , 5 columns in each row.
need draw 10 (2*5) items in svg element (rect, polygon, etc).
eg : # represent svg element boundries.
########### ####### #1 2 3 4 5# #12345# #1 2 3 4 5# #12345# ########### ####### rect polygon i solve rect, however, cannot seem understand how go other shapes.
could please in how solve this. thanks.
note : ok, if using library can help, please recommend, since don't know if possible using existing libraries.
here fiddle this. below code filling elements in rect:
svg :
<?xml version="1.0" encoding="utf-8" standalone="no"?> <svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="138.64612" height="214.38011" id="svg4796"> <defs id="defs4798" /> <metadata id="metadata4801"> <rdf:rdf> <cc:work rdf:about=""> <dc:format>image/svg+xml</dc:format> <dc:type rdf:resource="http://purl.org/dc/dcmitype/stillimage" /> <dc:title></dc:title> </cc:work> </rdf:rdf> </metadata> <g transform="translate(-132.1123,-309.24939)" id="layer1"> <rect class="fill_me" width="135.72713" height="87.295868" x="134.5313" y="309.74939" id="rect5355" style="fill:#040404;fill-opacity:1;stroke:#ffffff;stroke-opacity:1" /> <polygon class="fill_me" style="fill:#040404;fill-opacity:1;stroke:#848484;stroke-width:0.75" transform="matrix(0.939298,0,0,0.90867846,28.384527,198.27875)" id="cat_0000000051" points="148.2,240.301 133.1,273.6 110.8,325.334 228.133,357.667 239.899,269 148.2,240.301 " /> </g> </svg> javascript :
// required elements, , attributes item filled. var svg = document.queryselectorall('svg')[0]; var block = svg.getelementsbyclassname('fill_me')[0]; var b = { width : math.floor(block.getbbox().width), height : math.floor(block.getbbox().height), posx : math.floor(block.getboundingclientrect().left), posy : math.floor(block.getboundingclientrect().top) }; var drawshape = function (tag, attrs) { var el = document.createelementns('http://www.w3.org/2000/svg', tag); (var in attrs) el.setattribute(i, attrs[i]); return el; }; // create group in items filled. var grp = drawshape('g'); svg.appendchild(grp); // data, according block needs filled. var items = ['xava|xav2|xav3|xav4|xav5|xav6|xav7|xav8|xav9|xaav|xaaa|xaa2|xaa3|x2a4', 'xvvv|x2v2|xav3|xav4|xav5|xav6|xav7|xav8|xav9|xaav|xaaa|xaa2|xaa3|xaa4', 'xvvv|xvvv|xav3|xav4|xav5|xav6|xav7|xav8|x2v9|x2av|x2aa|x2a2|x2a3|x2a4', 'xvvv|xvvv|x2v3|x2v4|x2v5|x2v6|xav7|xav8|xav9|xaav|xaaa|xaa2|xaa3|xaa4', 'xvvv|xvvv|xvvv|x2v4|x2v5|xav6|xav7|xav8|xav9|xaav|xaaa|xaa2|xaa3|xaa4', 'xvvv|xvvv|xvvv|xvvv|x2v5|xav6|xav7|xav8|xav9|xaav|xaaa|xaa2|xaa3|xaa4', 'xvvv|xvvv|xvvv|xvvv|xvvv|x2v6|xav7|xav8|xav9|xaav|xaaa|xaa2|xaa3|xaa4', 'xvvv|xvvv|xvvv|xvvv|xvvv|xvvv|xav7|xav8|xav9|xaav|xaaa|xaa2|xaa3|xaa4', 'xvvv|xvvv|xvvv|xvvv|xvvv|xvvv|xav7|xav8|xav9|xaav|xaaa|xaa2|xaa3|xaa4', 'xvvv|xvvv|xvvv|xvvv|xvvv|xvvv|xvvv|x2v8|x2v9|x2av|xaaa|xaa2|xaa3|xaa4']; var rowsize = items[0].split('|').length; // pick first one, since of them have same length var colsize = items.length; var itemsize = { width : math.floor(b.width / rowsize), height : math.floor(b.height / colsize) }; // each row! (var = 0; < colsize; i++) { var fil = items[i].split('|'); // each column within row (var j = 0; j < fil.length; j++) { var draw = drawshape('circle', { r: itemsize.width/3, cx: b.posx + j * itemsize.width + itemsize.width/2, cy: b.posy + * itemsize.height + itemsize.height/2 }); if (j === 0 || fil[j] === 'x2v5' || fil[j] === 'x2v9') continue; grp.appendchild(draw); } }
inserting svg elements based on data d3js built for. if want draw charts there lots of libraries based on d3 make life easier. favourite dimple suppose i'm bit biased...
Comments
Post a Comment