Skip to content

Instantly share code, notes, and snippets.

@phanvanlan
Forked from d3indepth/.block
Created June 30, 2019 04:45
Show Gist options
  • Save phanvanlan/16c9d0cda183a6a4c1d9286d2356af93 to your computer and use it in GitHub Desktop.
Save phanvanlan/16c9d0cda183a6a4c1d9286d2356af93 to your computer and use it in GitHub Desktop.
Selection .append()
license: gpl-3.0
height: 170
border: no
<!DOCTYPE html>
<meta charset="utf-8">
<head>
<title>Selection Append</title>
</head>
<style>
body {
font-family: "Helvetica Neue", Helvetica, sans-serif;
font-size: 14px;
color: #333;
}
circle {
fill: orange;
}
g.item text {
fill: #ddd;
font-size: 70px;
text-anchor: middle;
font-weight: bold;
}
</style>
<body>
<svg width="760" height="140">
<g transform="translate(70, 70)">
<g class="item" transform="translate(0, 0)"><circle r="40" /></g>
<g class="item" transform="translate(120, 0)"><circle r="40" /></g>
<g class="item" transform="translate(240, 0)"><circle r="40" /></g>
</g>
</svg>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js"></script>
<script>
d3.selectAll('g.item')
.append('text')
.text(function(d, i) {
return i + 1;
})
.attr('y', 50)
.attr('x', 30);
</script>
</body>
</html>
�PNG

IHDR��T�bY�IDATx���k�]g}�g��H#ɒo��M��al��o)iZ��&˄..F��H�%!$)��!+m1��� Yv��J���PJH��4Ŵ@R�� ��m���� ���Esv?H� �}���g�����ͻ�����h���ߝP_E�FQyS��|���\�"OIrAʜ�"�'Y�d�ѡ�I���)�'�])sG�������|���Ǧ�ͦ�< p��,�|�H7��̖�p0���9�|.c�Q\�ف�K_Է���^-���x�H7W%ye�C>�L�O���Weǐ�EԷ���~-���)�3�7%yC2�+E��=� �]U,�m6��D,���1�H��&YWu���O���rm�A�@}�M}8QK�.��$�N���,�aW�w[󱪃ԑ�6��0(�n���ٔ"ץ�K��ғ"�N��[sg�Q�@}�M}��6��y]��^��9Π̛ͤ�m�P�AF��6��0 �l��s}����'�� Ŷ����H}�M}�F5���촲=ɖ�� ���fkqu�:�(P�fS_��1 p��\��|"սeXn�|^Y\�[�R%�m6�`14�.�(�J+�䜪� ɞt�������TA}�M}X,�o��^9�oi��c�d>�/�+I��l� �b�u|����Ӽ�&���f�Ry�P}�M}Xl����#�,��Ir���yiP�fS_Ym���\���ۏ-G��FS�fS_�P�[����êsT���m�P�1�A}��M������5���lJ��$+��R��$�[sg�AI}�C}����u����u��9IV]�fQ�cԷٚY_�W��ܞkR�U�e^Zn�5U��=��6[�� P�j�����#�IkҤ�eP��&M�^Ś,��4��yG� U�A��M���cR�fkD}��`�7ey���$��2���x�-��l�AB}���6[�� P'��<�7Ň�dz��Փ�>�m�z��F��'o�:@ �y��}��y��}�X#�E0� p��\��ªs���GתVԷg��l��/@݌|�n��:Bm�q�꘹*u\�:f���������9�&YQu����x��e3���6[�� PG�}x>Wć�~�8�f����R�f�W}jh��n.�:B��i��uT�i��uTX3����̖�#�N�֬NYGE�֬NYG�5��}��)ge.�V����svqe�Uu�ǣ�'@}�����ѽ<�gW���vu�8��vu�8���Ќr|i�j�kW����kW����� ��6�E�Ru�ڪ���!㨪���!㨲vC3� prA�j�kW����kW����� ��6�eΩ:Bm�a��qT�a��qTY;������UG��:�]2��:�]2�*k04��'k�PcuX�:dUuX�:dU�`H�U�q,�:@��a��q��~E�OzF�&�O9v���B9�e�{3>��ʇ��n����vu�8TO��L�y^�VnHw�)��k���#�=�3+�bV������`XF��8N{q>��)��������xO&�}m��я�ֿ%�O{q�VnHO7a�[Z�����9��۳��C����;�y�I��쪧�l��ሷ�50�ܚ5{oʚ��e���Qn�g���:�(ٿ�%�9��3����3�#k7�\}�����u/IY��}lwlu��>?�k��e�Z:�3��n��!��%U�G�tu:�͙�����تL�}^��>/>�]9���'7 !%�� ����U��xБ��uX�:d��5��]Ϲ%����5��;<~f��#�N狷�v�IOx@5�L}�x{����5�Ǜ?-<���:�έ;w�<s��.���y���df��9�����a��q}���s���π�OLL�=55���1� Y�-[+��Y_Ρ�/������gjj�uØ`���Ȟ�#�����J�b���uX�:d<A���3�ï'��maN)���N��c�<I�^��ت�~�_���y��,�߹s�5�< �R2� prW�F����|��#�R���C�;pڏ��ߙ���;\cI>9b��6��e1�o^�#�ù��VQ�t:OY��4��6�e�:�(�w����y���AuX�:d\���"{ۿ�E��ZS��l!���>p�odn�ɋy��I>��'h��m�����#T����2{�����:�]2.�}��OwlU���N���*N�}Z��ؚ�;�U�zC���`'h��} �XnI���8pڏ��'�J�&�_�c�e������펭��S����d|z*cs�;�&s+�����s��_%�h������~O�;y�Y~���|�KY~hg�23�/��S~$�W����W�v�m��y��������B�7�R�ªs ���M�^��:��^�̏�[�Le����=k.�T��EW���ݻ���;�U=�/�39e� 9������=r����~1ݱ��D�e�������s�04��ݱ5�Ƴ��������f��Y��,?t����3^�.��~~�Q&��v��_p���^N�"7'��}̃O��<r��I���}w�̏�~��&��շ,�r�ޯ���伿�,�f���~���o}4{.�TfV_��I�JRyܴ�>r������������)����Z���9����/d~���ˊ$/�(\����}8IZ�\������l�Lٚh�$s�6��@'���w�����3p7O��M���S��9�֗el��=�(���<x�Vߞ��[��쿿�q��c��L��+�a�Q��u �o���H2Su�A+�sC�{�������4��N{qz}�`�����|���E9�S���9rlO��W"5��ekE�V�{�������]=Ͻ�ᛳ����:���8�H7�ŕ�M�s�I�Xu�� �jZ}�&6�6������w}ͽ�?Nk�`������\ϗ��I��]�)ݱ�=����{?���c���
���t�$i��UG����K�#�!�-[+2?~zOcǧ��e3w�5QΧ(g��q�`�? �o�Z�b�O!L����p��o����#��U�`8�R�#W{��wb��Y�)n�_vj�������i����~Y,��Ck��뫍����� �Q7T��jD}{{��̪���B����9�QGn�8r%��I����e�?����X�Ozf�oM����|��~ �1��`��$ }A�H)[��� ������3��e������۠P�S��@N��C�{o���˱�==`��voJ�%� pqef���yO�Y������Ć���X��)[�z��4������h.��Y��ύ�˼�3���*�M=q`ff�`'�&�wX�����u/��q���6m�ˡh�Z4�IRl˵���>Ɇ�����G���G��������=�U��.�ٓ���,���^W��Τ�N�3��b[����LY�=��Eq��͛{}�tQԽ��4���G�|u��{Y��O����,��\�XBj���$����n���Pm�l����1��w��yMY���8��v��cA���]��&'�N���锭�t�V�l�\�T�}rr��RT�V�U�5K�OW���P����� :Z���=��CI�p��l�շl���S�I�������2?�n���W��v���qԪN��y[���c0$�{��ܚ���(:IV�zPQ299y�s���T��p�����0���v���%X�j�[sgʼ�� ����y�x���/ʲ<������̼uh�@}���v��sU�h��5�IRlˇR6�ݢ� K���~���݃��қ���㰲(�߸袋V�AY����k;��l�ӹ�� MQ�8I�myc�����p,��ή�0����CN������lܸ����5 K�� 4��W;�����m��$�lMr{�1�%T߽�m�������K�W���5lK��E�{�=�-�N�k�� `��u\\�{3�W&�Suo)����sr�3>�}g�z����r]7IZ
�m~8���)��)�3INdW��t:����պN��ܚn~" �]���:CU�\�׿%����M���)>�n�x��[��[��Y�7?� �v� _��9��M�v{���^R��ۓܒ��s�OMM]6��KB��$)��_e>����S�~����S�!�Դ���X�y�'��oJ���L�M�v���G�D��{��3�ˋ��W��bӦM�MNN���n?'�ӓ|���Z�n�]O �D4�N�s%iK������f����:H՚R���~*�x�_g椧/t��ʲ<��n�g���֔���t���&�>րv���V�5���^'-�����g$!�Ә89�La�5?ڈW����ؚ-����q�ս��M�N.ݱ� 9����v������m$Խ�ߣ��� 6L'y]�Ը�V�����D-�:�0�����ܒ"��dE�y�4�2o.��CUUu�o�Z�{��#s:ŭeY������F�����]uaR>���3�s�ݿ����v������J��ax��I>��9hh�$Ŷ|�ܞ/��u)�Ҫ���ȧS�mŶ�Yu�QW��^�>�<���[�����v��~ǀc��Q���.���K�pܲ�o�?���~� ��~#�5�,P�n�>^�5w��O&��$����8v%���5��b��W�^��U��f���?�ey�Rl~���.?xGO�/?��'����_H��F7��[�bk6��;��_u��rʼ�ؚ���|��0u5��=�b}�\�'e�Z��e����EK��'Ru}��~�סg�ܹ��af��,���b[��x�M�T�ʕۓ�%�9�ؖk+��(�R�rl�{�����ʢ�C�E�v��ơ����[�]�j�^u���yg��[R p�Wf�ؚ[�Դ�$ۓ�,©g�lO+/)����|��2��p�%e�빷Mw�&���3;;{�ƍ?=�pMQE}'�jzܠ�(��gr�]�vM$���!��o�q�\�݊���ؚm�ڴ��$ק���#s]�V^��-�f[qUv l~W������'yZ�3�M�ݞ�袋X�%`�����ۊ��x�ӧ�����T�n�#IN�uxQ��98�: �Sޔ�2�gg>���S�\�2���I�$Y~t�l�})�@��IrW�ܑ�|=c���2=?<�x���~�,�_�%z�W����<��6հ�k׮�n�{o�S��s{��~� �/�F};��?$�������ś6m�����N�I�8�X��?4==��͛7��q<Gi�k@\SSS�[��/�q���,/k�Z�n�;����ƺw�uח�l�rxPs.u�N�I���!u��mڴ�o�Ν;�MQ�H��o��y���g}��(�݀8z��5}��(�/�e����ny���:�M�t�k�Z���v>�ߦ|j�պ���|�,��&''?��_������,9����[���<��4�0�n�璬�:�1eY�W��I6l�0��t�'yC�I^Tŋ:��t�G����eY�����LX�k�ƍ�[ȱ,�M�`���:õ{��_���C<��̣��&9��v��� `8a7�|�,/�:õe˖�eY�5G��_le��NNN�W��C 'h���EqF�9���ɏ%�a��[�������}^���É;9vT_2���ϕey]�JpYſ���|�"� ��4�p�.I����&''�(�+���i�&���7�����h��(
��"+����`��o�ƍ�ؽ{�iI>��^ �K��v�}f���1�y�< p=�q\��7�ؕj6Fz,�,�-[�n�ۗw��K�|*�� ��,�=I�`��ݫ���� ,$�1RW��n�Ν/,��I����yF|�w )�L'y0�TQ_i�Z��� v-~Z��˛sV��CIEND�B`�
�PNG

IHDR�x��� pHYs  ��~�uIDATx���{��u}������ۜ3����fYv�YV��\�X�x�Q�]�E�1����VES��F�Zm��"I�YnB �ڊ� F�Z��3�eX�6{��33�<�o�8gΜٝ�.b�|^����9��<���}~���<�Y �9棘��{��,��1�|?�����`~�?�������}���Ϣr����>�������}�sE&��Z�����!�V�� g5�~��]Jն��."�Jz��� �� p��+����g)����a[O�?'0���� �>@��Ȭ� �oe�F�d��A���C��̟�8�N,W�h��?G� �~/Fy?�s�y �h4�a��� �l[y�D7ȟi����x��j�"ʭ�o@�����87�f�=�u_�����fA��.�j2�EIJikL�^���W;�oCcT��ӌ�1�`�|'�3�Ctpy�
����ˁ�˨�)2�^���_���?B����6^�����(���f8�ɔ�(�w��/�=�?�܇E�;Y��J�]��,�!w���r��d���jh+/�czL�Y�\�s %*��(���U�e�����r^�4�� ����{�]�A�������m�7���I�����3FӃ�A�u��N���6S%%�i� ��j�'>D�-~��x�F�-�^W�DLk�~?��F�p>p39*L�(����|M�㤌�R�<��х�^��Y����F���QofΝ Ub*\J������m͢��.�[�`3Uj4�/�-o˝\ocY�:eΣ��� J��̟�̭��Va�cvI���2%:I�i4~��@'Y۲����o�b;waC<[��eR��2�Q
L�L���ET%�����3o�fn�_Q����g��
o�Ƨxz�T��MM�V�F�m�)ۧ\f�^�9 �:�l��dy/�$�匑�88S�1�*Zۑ�i���|�������Y�G��{����s���������*L�H��Q�����S�s��h�Y��Wy/��M�N��T]Ӗ��\���6�j{�y/��x�\F��s~�<���8_.��'#�Rb��qMɉ ~{�� � ��YXG7�9�u�b:C ��Ps7��\�v@�7�iTe#��`1����u����w�څ�:f�\'���x ��G�sZo"׺B���e�n��� � R��3�q��if �X��A�dq�5w!u#Ɍ̍�!I���{���Gf��f���v��m� *��\˜f.��Y�s�2����Uq��k�.�i�����.����@�0�띛�й�$۽Կ�'�3g�t����
|��o��i=%`iFұ�z�Y��YP����,t�G���s���ܗ7ftјQ�w����qʈ;N��y���UT|~��|����t�V�]:ߔ��hDͿ��b>��P� K�����[���� 䞼>^�/�=ө���˩˰�Ys9C�~��c�G��8Ӯ�?�}[��l��-��TncKGV����>G\:�����jϟ6ׯ�s��Nߥ�r���SͿ���e�3�sj���Vr��[�_�%?D���5��'aZ?�ɴ�9� �Rg����w� $�uD�~
�}�2�:J�+�����w�� �rS�Mմ��)L,{ �N��$��|�/�<fQ}OFqe>Zr� �ϔ+�P���*�gIy�V�sI�%P�������Y0��v7��ZQ�<�i�l�s6}����K�暧`d���L.=�+�?c�>v����d �� �κ���� �G/�=7�G�\E�[F� �����s��y���G�`F��v3�PV�˴���s��2@�v8���Z� j��bx�{�;^Ff��0V3jŞ�����^���ʸ�"�ܹi���%�& Erc}�d�]N�*C�'�� /D�"x�f)��4�m�Һp2���d���'��|�!:�<�X��=�#8��'"ǩu���l �שr-P2�._����wya�I�%C>�u��W�H ?��Dxs�g�6���d�L=�rths��Py������9Qck��u?�w�b]�c�0P�׭P(L[�M>�R�^&x��$!aꦊ�'�<a��u�#$G,-�$��IFW\jI~�Ei �vAc(�^S��� K�|�`�y�f��!��ƍ;�W�bɾ������F�9��|�d>f��NdW�<��Z�2��s�YUH�Y��I_�����_� K�]�{θq)��(D�� ����xc�~B��2
��br�c;�Ot9��A�c�XT;� ���C��gn����T,F�z}WOO�M �u�YM�v6g(��<c�Ieڭq����/f�BJ��R���{��Sl_e���z������p�9�u�,5��ꊷ�{�]�t�3�u�h�z��76o�^��&s�l���)����88Xk���I���0>�c��o��{�,�,l�����\�"�9fRƿ��E�tq5Un$Oh޲f4�;c 7����+gu��SD�swB�o�>N��&`�0�ѹ@�1�0B�C=ױ�_����|V���#��[���+zzz��fF'ghm_���p
D�cs͉=t�qycW^R���>xm�ik/4��8N�
��~����ɋ�w��c
���x���ń��Z�"��@F�<e���A�N��H9�cѿp �to�~)i��R�b�nܮ�8�N�2y*��9�X���
�{6}����DQd��?�J�ݸq���F/��^�w6o���?o�η���-����Փ�r���wv��Ϳ �㛖���g�O��B!I�5�K&r|f�j3��a����⻸�C\F����4z��?%�ް���_�ߑ����� �P���� l+��]�����26b,R��!K�G{�����Uo{O�>li�=�][�E{���7fYF�X��_�~p���^����� �V��8�6�1��u�=�%�H�qqû���ōf����� w?7�c�4�����pVo�������z;��R�l��{(�#�K�����Z�tƇj�33��sQ�M+���Xv���Z��{�����G�2��:������@bf�z����.X�r���mۉ�A��`����~7E���^����K�/�,��h�zN�����p�W
�����9һaÆ� �i����-y���T=E�>�^Ob�7n��� b/�$��>���q��湟��A�I�l&�\����+���{�ZO�����EQ�.�2ܝb����h)��E=�e]��ۚ��#1�u��E��˩�}���ç�Z������3���J���}�J���%r��-�I�i�Ft��n�w4'c�w&��U�ծ���
��q����5������~��q/��������8�8� ���j5�'�tҢ��m�nk�}��-�r�,�!��������������f6nf����y I���0�D��А&?D~���s������m���9w�fz=��s9������G�Z-���j����扈�������������������������������������������������������������������������������������������������������������������������������������������������������o���T2V,��IEND�B`�
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment