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 | |