Add elements using .enter and .append (starting with empty selection).
From D3 in Depth book by Peter Cook.
forked from d3indepth's block: Add elements using .enter and .append (starting with empty selection).
| license: gpl-3.0 | |
| height: 130 | |
| border: no |
Add elements using .enter and .append (starting with empty selection).
From D3 in Depth book by Peter Cook.
forked from d3indepth's block: Add elements using .enter and .append (starting with empty selection).
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <head> | |
| <title>Add elements using .enter and .append (starting with empty selection)</title> | |
| </head> | |
| <style> | |
| body { | |
| font-family: "Helvetica Neue", Helvetica, sans-serif; | |
| font-size: 14px; | |
| color: #333; | |
| } | |
| #content rect { | |
| display: inline-block; | |
| margin: 10px; | |
| fill: limegreen; | |
| stroke: blue; | |
| width: 30px; | |
| height: 30px; | |
| text-align: center; | |
| } | |
| </style> | |
| <body> | |
| <svg id="content"> | |
| <g></g> | |
| </svg> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js"></script> | |
| <script> | |
| var myData = ['A', 'B', 'C', 'D', 'E']; | |
| function doEnter() { | |
| d3.select('#content g') | |
| .selectAll('rect') | |
| .data(myData) | |
| .enter() | |
| .append('rect') | |
| .attr('x', d => myData.indexOf(d) * 40 + 'px'); | |
| d3.select('#content g') | |
| .selectAll('svg') | |
| .data(myData) | |
| .enter() | |
| .filter(d => myData.indexOf(d) % 2) | |
| .append('svg') | |
| .attr('x', d => (myData.indexOf(d) * 40 + 7) + 'px') | |
| .attr('y', '7px') | |
| .attr('width', '30px') | |
| .attr('height', '30px') | |
| .attr('viewBox', '0 0 61.3 61') | |
| .attr('preserveAspectRatio', 'xMinYMin meet') | |
| .html(`<style type="text/css"> | |
| .nn1{clip-path:url(#SVGID_2_);fill:#FFFFFF;} | |
| .nn2{clip-path:url(#SVGID_2_);fill:none;stroke:#DC4C26;stroke-width:4.88;stroke-miterlimit:10;} | |
| .nn3{clip-path:url(#SVGID_2_);fill:#DC4C26;} | |
| </style> | |
| <g> | |
| <defs> | |
| <rect id="SVGID_1_" y="0" width="61.3" height="61"></rect> | |
| </defs> | |
| <clipPath id="SVGID_2_"> | |
| <use xlink:href="#SVGID_1_" style="overflow:visible;"></use> | |
| </clipPath> | |
| <path class="nn1" d="M58.4,30.4c0,15.3-12.4,27.8-27.8,27.8c-15.3,0-27.8-12.4-27.8-27.8S15.3,2.7,30.6,2.7 C46,2.7,58.4,15.1,58.4,30.4"></path> | |
| <path class="nn2" d="M58.4,30.4c0,15.3-12.4,27.8-27.8,27.8c-15.3,0-27.8-12.4-27.8-27.8S15.3,2.7,30.6,2.7 C46,2.7,58.4,15.1,58.4,30.4z"></path> | |
| <path class="nn3" d="M50.2,18.1L45.2,13c-0.6-0.6-1.6-0.6-2.2,0l-3,3c-0.1,0.1-0.1,0.1-0.1,0.2c-0.1,0.1-0.2,0.1-0.3,0.2 c-6.2,6.2-8.9,8.9-15.1,15.1c-0.3,0.3-0.5,0.6-0.6,1c-0.7,2.3-1.3,4.7-2,7c-0.2,0.5-0.2,1.1,0.3,1.5c0.4,0.4,0.9,0.4,1.5,0.3 c2.3-0.7,4.6-1.3,6.9-2c0.4-0.1,0.8-0.4,1.2-0.7c6.2-6.1,8.8-8.8,14.9-14.9c0.1-0.1,0.2-0.2,0.3-0.3c0.1-0.1,0.1-0.1,0.2-0.2l3-3 C50.8,19.7,50.8,18.7,50.2,18.1 M26.2,38l-0.9-0.9c0.3-1.1,0.6-2.2,0.9-3.2c1.1,1.1,2.1,2.1,3.2,3.2C28.4,37.3,27.3,37.6,26.2,38 M31.6,35.2c-1.1-1.1-2.3-2.3-3.5-3.5c4.1-4.1,8.3-8.3,12.5-12.5c1.1,1.2,2.3,2.3,3.5,3.5C39.9,26.8,35.7,31,31.6,35.2 M46,20.7 l-3.4-3.4l1.6-1.6l3.4,3.4L46,20.7z"></path> | |
| <polygon class="nn3" points="41.6,30.2 41.6,45 19.1,45 19.1,17.9 36.1,17.9 39,15.1 16.3,15.1 16.3,47.9 44.4,47.9 44.4,27.6 "></polygon> | |
| </g>`); | |
| } | |
| doEnter(); | |
| </script> | |
| </body> | |
| </html> |
| �PNG | |