i extremely new d3, apologize in advance if stupid question. have in html document set of paths form water basins around us, , i'm trying zoom in , move specific paths whenever clicked. svg provided me client, , not created using d3.
here's example of path ohio river basin:
<svg version="1.1" id="basins_svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewbox="0 0 256.1 128.9" style="position:absolute; top:-140px; left:-27px; opacity:0.8;" width="920" height="700" enable-background="new 0 0 256.1 128.9" xml:space="preserve"> <path class="st" id="ohio_3_" fill="#a1a6d0" stroke="#2d2a2b" stroke-width="0.1045" stroke-linejoin="round" stroke-miterlimit="10" d=" m209.6,85.3l-1.8-1.4l-1.9-3.2l-0.6-3.6l1.3-3.7c0.8-0.4,1.3-1.1,1.5-1.9c0.3-0.4,0-0.8-0.2-1.1c-0.6-0.9-0.3-2-0.5-3 c-0.1-0.7,0.3-1.2,0.5-1.8c0.1-0.3,0.3-0.7,0.5-0.9c0.4-0.3,0.7-0.6,0.4-1.1c0-0.7,0.2-1.4,0.1-2.1c0-0.2,0.1-0.5,0.1-0.7 c-0.3-0.9-0.3-0.9,0.4-0.9c0.3,0.2,0.7,0.4,1.2,0.3c0.5-0.1,0.9-0.3,1.2-0.7c0.4-0.4,0.8-0.8,1.1-1.3c0.2-0.6,0.1-1.3,1-1.4 c0.1-0.1,0.2-0.1,0.3-0.1c0.4-0.3,1,0,1.3-0.5c0.2-0.2,0.5-0.3,0.7-0.2c0.8,0,1.6-0.2,2.3,0.1l0,0c0.3,0.2,0.4,0.5,0.3,0.8 c0,0.5,0.3,0.9,0.6,1.2c0.1,0.1,0.1,0.3,0.1,0.5c0.6,0.3,1.3,0.3,2,0.4h0c0.2,0.5,0.5,0.5,0.9,0.2c0.2-0.2,0.4-0.5,0.5-0.7 c0.4-0.8,1.1-0.4,1.7-0.3c0.7,0.2,0.9-0.5,1.3-0.8c0.4-0.2,1.1-0.1,0.9-0.9c0.1-0.1,0.1-0.1,0.2-0.2c0.3-0.2,0.7,0,1.1-0.2 c0.1-0.1,0.3-0.2,0.4-0.3c0.6-0.1,1-0.7,1.6-0.7c0.2,0.1,0.5,0.2,0.7,0.3c0.5,0.3,0.7,0.1,0.7-0.5c-0.1-0.4-0.1-0.8,0.3-1 c0.1,0,0.1,0,0.1,0c0.4,0.2,0.7,0,0.7-0.5c0.1-0.3,0.1-0.6,0.2-0.9c0.1-0.1,0.1-0.1,0.1-0.2c0.5-0.4,0.9-0.7,1.1-1.3v0 c0.3-0.5,0.8-0.8,1.1-1.3l0,0c0.5-0.2,0.9-0.6,1.1-1.1l0,0c0.4-0.2,0.8-0.5,1.1-0.6h0.1c0.5,0.3,1.1,0.7,1.5-0.2 c0.1-0.2,0.3-0.2,0.6-0.1l0,0c0.2,0.2,0.5,0.4,0.7,0.7l0,0c0.5,0.6,1.2,0.9,1.6,1.6c0,0.5-0.3,0.7-0.7,0.9c-0.7,0.3-0.9,0.9-1,1.6 c-0.1,0.7-0.1,1.4-0.4,2.1c-0.2,0.4,0.1,0.8,0.4,1.1c0.3,0.3,0.7,0.5,0.7,1c-0.1,1-0.7,1.9-0.6,2.9c0.1,0.5-0.3,0.8-0.6,1.1 c-0.3,0.4-0.5,0.8-0.6,1.3c0.1,0.2,0.2,0.4,0.3,0.7c0.1,0.3,0.1,0.6,0.1,0.9c-0.1,0.4-0.2,0.8-0.5,1.2c-0.3,0.9-0.7,1.8-1,2.7 c-0.1,0.4-0.4,0.7-0.5,1.1c-0.1,0.2-0.2,0.4-0.3,0.6c-0.2,0.3-0.1,0.8-0.4,1.1l0,0c-0.3,0.5,0.2,0.9,0.3,1.3c0,0.4,0.2,0.5,0.6,0.5 c0.2,0,0.5-0.1,0.4,0.3c-0.1,0.2-0.3,0.4-0.4,0.7c-0.4,0.5-0.8,1.1-1.5,1.2c-0.1,0.1-0.1,0.2-0.2,0.3c-0.3,0.3-0.4,0.8-0.9,0.9l0,0 c-0.5,0.2-0.8,0.6-1.1,1c-1,0.6-1.6,1.6-2.1,2.5c0,0.1-0.1,0.2-0.1,0.3c-0.4,0.5,0,1.2-0.4,1.8l0,0c-0.4,0.2-0.5,0.7-0.9,0.9 c-0.1,0.1-0.3,0.1-0.5,0.1c-0.5-0.5-1-0.3-1.2,0.3h0c-0.3,0.1-0.3,0.5-0.7,0.6l-0.1,0h-0.1c-0.2,0-0.6-0.3-0.5,0.3l0,0.1 c0,0.7-0.6,0.9-1.1,1.1c-0.2,0.1-0.4,0.2-0.7,0.3c-0.2,0.1-0.4,0-0.5-0.2c-0.3-0.5-0.6-0.8-1.2-0.9c-0.3-0.2-0.5-0.4-0.8-0.5 c-0.8-0.1-0.4,0.7-0.7,1c-0.1,0.4-0.5,0.5-0.8,0.6c-0.5,0.1-1,0.4-1.3,0.9c-0.1,0.1-0.1,0.1-0.2,0.2c-0.2,0.2-0.3,0.4-0.5,0.7 c-0.1,0.2-0.3,0.5-0.4,0.7c-0.1,0.1-0.1,0.1-0.2,0.2c-0.4,0.1-0.7-0.2-1.1-0.1c-0.1,0-0.2,0-0.3,0c-0.4-0.2-0.7-0.4-1.1-0.1 c-0.2,0.2-0.5,0.4-0.8,0.2c-0.3-0.2-0.8-0.3-1.1-0.5c-0.5-0.2-0.7,0.1-0.9,0.4c-0.1,0.1-0.1,0.1-0.2,0.2c-0.8,0.2-1.4-0.3-2-0.6 c-0.1-0.1-0.1-0.1-0.2-0.2c-0.2-0.3-0.1-0.8-0.7-0.9l209.6,85.3z"/> i have been trying manipulate path in order shift , "zoom in" on specific water basin whenever user clicks on it, things proving more difficult expected. i'm wondering if it's impossible manipulate specific paths in svg using d3, or if need have created svg in d3 work it? appreciated.
(also, first forum post, apologize in advance poor wording).
if want panning , zooming on shape, d3 makes pretty simple add (even existing path).
<!doctype html> <html> <head> <meta charset="utf-8" /> <script data-require="d3@4.0.0" data-semver="4.0.0" src="https://d3js.org/d3.v4.min.js"></script> <style></style> </head> <body> <svg version="1.1" id="basins_svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewbox="0 0 256.1 128.9" style="position:absolute; top:-140px; left:-27px; opacity:0.8;" width="920" height="700" enable-background="new 0 0 256.1 128.9" xml:space="preserve"> <path class="st" id="ohio_3_" fill="#a1a6d0" stroke="#2d2a2b" stroke-width="0.1045" stroke-linejoin="round" stroke-miterlimit="10" d=" m209.6,85.3l-1.8-1.4l-1.9-3.2l-0.6-3.6l1.3-3.7c0.8-0.4,1.3-1.1,1.5-1.9c0.3-0.4,0-0.8-0.2-1.1c-0.6-0.9-0.3-2-0.5-3 c-0.1-0.7,0.3-1.2,0.5-1.8c0.1-0.3,0.3-0.7,0.5-0.9c0.4-0.3,0.7-0.6,0.4-1.1c0-0.7,0.2-1.4,0.1-2.1c0-0.2,0.1-0.5,0.1-0.7 c-0.3-0.9-0.3-0.9,0.4-0.9c0.3,0.2,0.7,0.4,1.2,0.3c0.5-0.1,0.9-0.3,1.2-0.7c0.4-0.4,0.8-0.8,1.1-1.3c0.2-0.6,0.1-1.3,1-1.4 c0.1-0.1,0.2-0.1,0.3-0.1c0.4-0.3,1,0,1.3-0.5c0.2-0.2,0.5-0.3,0.7-0.2c0.8,0,1.6-0.2,2.3,0.1l0,0c0.3,0.2,0.4,0.5,0.3,0.8 c0,0.5,0.3,0.9,0.6,1.2c0.1,0.1,0.1,0.3,0.1,0.5c0.6,0.3,1.3,0.3,2,0.4h0c0.2,0.5,0.5,0.5,0.9,0.2c0.2-0.2,0.4-0.5,0.5-0.7 c0.4-0.8,1.1-0.4,1.7-0.3c0.7,0.2,0.9-0.5,1.3-0.8c0.4-0.2,1.1-0.1,0.9-0.9c0.1-0.1,0.1-0.1,0.2-0.2c0.3-0.2,0.7,0,1.1-0.2 c0.1-0.1,0.3-0.2,0.4-0.3c0.6-0.1,1-0.7,1.6-0.7c0.2,0.1,0.5,0.2,0.7,0.3c0.5,0.3,0.7,0.1,0.7-0.5c-0.1-0.4-0.1-0.8,0.3-1 c0.1,0,0.1,0,0.1,0c0.4,0.2,0.7,0,0.7-0.5c0.1-0.3,0.1-0.6,0.2-0.9c0.1-0.1,0.1-0.1,0.1-0.2c0.5-0.4,0.9-0.7,1.1-1.3v0 c0.3-0.5,0.8-0.8,1.1-1.3l0,0c0.5-0.2,0.9-0.6,1.1-1.1l0,0c0.4-0.2,0.8-0.5,1.1-0.6h0.1c0.5,0.3,1.1,0.7,1.5-0.2 c0.1-0.2,0.3-0.2,0.6-0.1l0,0c0.2,0.2,0.5,0.4,0.7,0.7l0,0c0.5,0.6,1.2,0.9,1.6,1.6c0,0.5-0.3,0.7-0.7,0.9c-0.7,0.3-0.9,0.9-1,1.6 c-0.1,0.7-0.1,1.4-0.4,2.1c-0.2,0.4,0.1,0.8,0.4,1.1c0.3,0.3,0.7,0.5,0.7,1c-0.1,1-0.7,1.9-0.6,2.9c0.1,0.5-0.3,0.8-0.6,1.1 c-0.3,0.4-0.5,0.8-0.6,1.3c0.1,0.2,0.2,0.4,0.3,0.7c0.1,0.3,0.1,0.6,0.1,0.9c-0.1,0.4-0.2,0.8-0.5,1.2c-0.3,0.9-0.7,1.8-1,2.7 c-0.1,0.4-0.4,0.7-0.5,1.1c-0.1,0.2-0.2,0.4-0.3,0.6c-0.2,0.3-0.1,0.8-0.4,1.1l0,0c-0.3,0.5,0.2,0.9,0.3,1.3c0,0.4,0.2,0.5,0.6,0.5 c0.2,0,0.5-0.1,0.4,0.3c-0.1,0.2-0.3,0.4-0.4,0.7c-0.4,0.5-0.8,1.1-1.5,1.2c-0.1,0.1-0.1,0.2-0.2,0.3c-0.3,0.3-0.4,0.8-0.9,0.9l0,0 c-0.5,0.2-0.8,0.6-1.1,1c-1,0.6-1.6,1.6-2.1,2.5c0,0.1-0.1,0.2-0.1,0.3c-0.4,0.5,0,1.2-0.4,1.8l0,0c-0.4,0.2-0.5,0.7-0.9,0.9 c-0.1,0.1-0.3,0.1-0.5,0.1c-0.5-0.5-1-0.3-1.2,0.3h0c-0.3,0.1-0.3,0.5-0.7,0.6l-0.1,0h-0.1c-0.2,0-0.6-0.3-0.5,0.3l0,0.1 c0,0.7-0.6,0.9-1.1,1.1c-0.2,0.1-0.4,0.2-0.7,0.3c-0.2,0.1-0.4,0-0.5-0.2c-0.3-0.5-0.6-0.8-1.2-0.9c-0.3-0.2-0.5-0.4-0.8-0.5 c-0.8-0.1-0.4,0.7-0.7,1c-0.1,0.4-0.5,0.5-0.8,0.6c-0.5,0.1-1,0.4-1.3,0.9c-0.1,0.1-0.1,0.1-0.2,0.2c-0.2,0.2-0.3,0.4-0.5,0.7 c-0.1,0.2-0.3,0.5-0.4,0.7c-0.1,0.1-0.1,0.1-0.2,0.2c-0.4,0.1-0.7-0.2-1.1-0.1c-0.1,0-0.2,0-0.3,0c-0.4-0.2-0.7-0.4-1.1-0.1 c-0.2,0.2-0.5,0.4-0.8,0.2c-0.3-0.2-0.8-0.3-1.1-0.5c-0.5-0.2-0.7,0.1-0.9,0.4c-0.1,0.1-0.1,0.1-0.2,0.2c-0.8,0.2-1.4-0.3-2-0.6 c-0.1-0.1-0.1-0.1-0.2-0.2c-0.2-0.3-0.1-0.8-0.7-0.9l209.6,85.3z"></path> <script> var svg = d3.select("svg"), path = svg.select("path"), width = +svg.attr("width"), height = +svg.attr("height"); var zoom = d3.zoom() .scaleextent([1, 40]) .translateextent([ [-100, -100], [width, height] ]) .on("zoom", zoomed); svg.call(zoom); function zoomed() { path.attr("transform", d3.event.transform); } </script> </svg> </body> </html
Comments
Post a Comment