Skip to content

Instantly share code, notes, and snippets.

@localpcguy
Last active January 8, 2018 22:42
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save localpcguy/b5c4193dd9426ae3c1371f8b0061d287 to your computer and use it in GitHub Desktop.
Save localpcguy/b5c4193dd9426ae3c1371f8b0061d287 to your computer and use it in GitHub Desktop.
Add elements using .enter and .append (starting with empty selection).
license: gpl-3.0
height: 130
border: no
<!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

IHDR��T�bY[IDATx���{l�U�?�g��u݅9`@.Ť\t(��}�2t�6�D@�M�8�$�23A� 1�2X��x���3D���+���h������i���ٺn��s_����}��9�s���Izz.�L���dT��I�1�m%IG��I�%���5`'�B�ݾ���M:����ill���c���kok֬Y�t�҅��� �\s��i@ �C����w����;��#O�鵁������wu�Q�%Y��������f�{���);�&�6���ب]]�o6�p��q��{����+Y�jՀ�������9�v4��e˖巿������)mmm��_�����C*�J�{�m���w���S#x{�x�P
joo�A�����,X0�`����|�+Y�v�P��p��Z)%w�}w::vޖͧ�z*W_}uJ���"����?�鮮F^~���~����;���#��rJ�����tH�5���xH'>���ҥK3o޼�������ʕ+SJ��ѣS[[�woÆ Y�zu����w�+UU�[�vm����]{�;��/�@iz����ioo�s(1z󷴴���_﻾f͚�|��[�onn����lCggg*�J��7����/Ɖ'����/UUU}�t�ڵ�}�C��H{�/_��.�(6l�*�u��]�T*���Hkk�qׯ_����~����jiiI{{{���2r��!�����_Y��ݩT*���NKKˀ}�aÆ���lUVggg������^����aò�~CZD�tu��)Cp��g�x�}����k��W_}�444�$e���e���eѢE��R}�ђM�})�{l���?^ZZZ�*���n�Kw���������S�>��z��A�lܸ�466���ƾ�?���ҝs�9���{��;찾{w�uWٸqc9��C��-Z��_;��;�c�vw�q��+���q��2a„���R����i��֯^�J�,^��̙3��Rʹ��/fo����2}����'�xb��k��_;��_|�����Ǘ��������\���￿�R�<�wm���}Ϸ׍7�د�+V ��R��������.7�p�6۶e_\}�ե�R���r�a���<.[������;s�̾<�w\ٸqc)��'�|����ѣ�s�=��>ٲ�g�qF9�S�� &�!o�W��Pf�����5=�P�M��/|� ��O~�woΜ9��W��RJ�y�,^�8ɦ%ӳf�ʣ�>�RJ�Ν�%K�lU����s饗���-���u�Y���w(�w��ݔR2gΜ\w�u����ʕ+��(����v�_r�%)����ܹsS[[�'�x"x`ZZZ��~0=�PN=�ԔR��k����-===����w}��-�/��R�x�tuu���;x`6nܘaÆ���.ɦ��c�=6���innμy���֖_��W���IWWW���RWW��v�m�����mhhHSSS�ꫯ��xG.���\z�)����9g�qFV�\����444dժUY�pa�������HwwwZ[[SJ�%�\�ﳲe������LOOO������>�=�˖-� 7ܐRJ֬Y�+��2mmmI6�A_�paJ)�����b��ק��6������ʸq�r�=����+g�qF�,Y�RJ,X�O<1�Je�>Y�lY���o�W^I)%G}t^}��AW7�Cy�v-\�0���Y�|yƌ��s����Kwww~��̙3'I����ӟ�tJ)Y�bE*�J�8�$����'nU�SO=����\{��I�g�y&/��B.����9���S�T�|$I2v�؜s�9���ɨQ�2v��!����>�$y��ޗ���5ȍ��9��3������3�̬Y�� ��l5 ��{�R����p�=��|��ϨQ�^�~}�:�TWWg�=�̧>���R�_�"�~jj6u��'���K�g��k��6,555���J{{{�����d�ҥ����ڵk��?�9]]]�={v��c���><3g���wߝ�_~9<�@fϞ�$�ƽ��{�/})ÇO�iY��/����y�y�Gr�e��-����NWWWf͚շy�ԩ�ꪫ���Ϛ5�/������~:˗/�ҥK3��TWWgÆ Y�bE�����<��~z_�iӦ����?���������[o�5�rH��odԨQy饗������N]]]�Y�ޟ���R�T������~��9���ё�N:)#F�Ȱa�v(M�i:� �P�'�jP��C�P�����O�?�a������g���&���3�����^{�^�3�<����g�8q�V�������UUU=zt�d„ ���n�Gw o����{�ϕJ%ӦMKCCCJ)9餓��~�eٲe��}��ײ������o�i������A�)�w̘1����n�67w��<�䓹�KRWW����}�z��d��_�^���ڌ?>���gS[[��Ç��_�rƎ;h���$o� 0�Zoz �����<��ӹ��;s�=���o����s�w���.S�N��7ߜ���455妛nJUUU&N��Q�F���[Z����}��?��dѢE���ϤI���������4��F�wwwg͚5}=�z�Y�`A�N��+��"�V��j0:y��,X� ��<���Y�fM�dѢE��7��I�&��/����?���? �9�\p�Y�dI�{�\x�}˦7�dɒ�w�}o���J%���?�q�����哟�d���466f����W_��S�׭[�����p� �8qb���? ��^3f��\��������{���v���Ԕ/~�9��#��U[[�y�楩�)�J%w�yg�L�������^���˳z�괶���k�͡�����/��O֭[�����ioo�-�ܲU����#��m�ݖ���ttt��npu��������or�g��wz�1�����ڵk3gΜ<���>|xN?��̞=;��ݩ��������|&���Y�`A&O��U�&L��7��wB�u�]��~��CN��`�wyk��{C͟�o����>�w^8��<��S�<yr.���TUU�=�yOn�喌3�_��ӧ����~���s�WfҤII��:(˖-KMMMF���N;-�zh���.���QG��n�)�rH.��|���pƴ��)7�xczzz�P{'N��8 imm͜9s��#����:�Ǐϔ)S2v�ح������wgƌ����>��ŋ��,�i�2}�����8qb>�O 8h޼}^xaf̘����\q���}��9�R[[�������w��d���G���ƌ7.GuTfΜ�����s�=���>����L�2%3f�Huu��}��|��5v�XK��?���<�v�����^�T��e��Sy�L�����R֯_��4�֭�z{{{���ءx�/.w�uW���)��r�uו���jHyߪ�vuu�P�m��3��j������/�l�O'�tR���XJ)�>���m0]]];�l�������l({��W�Z�ڞ{�� 4���a��{�F� ����?�����2�{l�5{:� &��SO��'��$ihh�c�=6�����ni{�T�yj��ѣ���oY��޻o��@K����m0���ޞU�V��d� ���6�Sy�y��p�1����� �}�иq�vuUx~��_�d�ԩ�� ��xS�2�W�T*�F�9f��w�}�ȑ�����#FdĈ��정+W���G����ͻi���/$���:����W%�d�${$��[px��$��N�Z�uI��;Ɏ���*�� W�`>``%�������_��4�`�?IEND�B`�
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment