2f:[] 2d:{"title":"Groups and Layers in SVG","cells":[{"id":0,"value":"# Groups and Layers in SVG","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"SVG uses the ` ... ` tag to collect other objects inside of and Group them. This is also the construct of Layers. Layers in Illustrator are Groups in Inkscape and core SVG. \n\nThis can be a very convenient tool for us because it allows us to target different areas of the overall visual, or collect like things together. It can also be used to control stacking order as Layers, because the `` elements will draw stacked as they are defined in the order of the svg, with objects drawn within each `` drawing in their own order within that. \n\nGroups can also be moved around the page on their own, bringing all of their contained child objects with them. The `transform translate(x,y)` attribute will do this. This is useful for combining multiple visuals on one larger page, or for grouping objects together in clusters within a single visual. Or both.","pinned":false,"hidden":false,"mode":"md"},{"id":63,"value":"viewof range = Inputs.range([0, 1000], {label: \"X Position\", step: 1, value: 300})","pinned":false,"hidden":false,"mode":"ojs"},{"id":80,"value":"viewof range2 = Inputs.range([0, 500], {label: \"Y Position\", step: 1, value: 300})","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"","pinned":true,"hidden":false,"mode":"html"},{"id":29,"value":"## D3 targeting\nWe can also use these to target D3 objects into the layers, be that for drawing new, or selecting from.","pinned":false,"hidden":false,"mode":"md"},{"id":33,"value":"layer2 = d3.select(svgContainer).select(\"#layer2\") // selecting it by it's #ID","pinned":true,"hidden":false,"mode":"ojs"},{"id":42,"value":"layer2.selectAll(\"rect\") // there is only one in layer2, but notice that it's not getting layer3's\n .style(\"stroke\",\"black\")\n .style(\"stroke-width\",\"3px\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":38,"value":"layer3 = d3.select(svgContainer).select(\"#layer3\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":50,"value":"layer3.selectAll(\"circle\")\n .data(data)\n .join(\"circle\")\n .attr(\"cx\", d => d * 20)\n .attr(\"cy\", d => d * 5)\n .attr(\"r\",10)\n .style(\"fill\",\"cyan\")\n ","pinned":true,"hidden":false,"mode":"ojs"},{"id":53,"value":"data = [1,2,3,4,5]","pinned":true,"hidden":false,"mode":"ojs"},{"id":59,"value":"## moving groups through translate \nThe groups above are already placed at a location, but this just shows that as we move them, the child objects go with the group as children of the group, and the child objects locations are relative to the group's location base, not absolute in the overall SVG. This relative vs absolute coordinate system can be useful to us. \n\nUse the sliders above to move the groups around.","pinned":false,"hidden":false,"mode":"md"},{"id":66,"value":"layer2.attr(\"transform\",\"translate(\" + range + \",80)\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":78,"value":"layer3.attr(\"transform\",\"translate(50,\" + range2 + \")\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W2f","stdlib":"1","titling":"auto"}