Skip to content

Instantly share code, notes, and snippets.

@kosirm
Forked from d3indepth/.block
Created November 28, 2019 23:46
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 kosirm/a1ba4e7dc31bc67f23e5fd9a1afff476 to your computer and use it in GitHub Desktop.
Save kosirm/a1ba4e7dc31bc67f23e5fd9a1afff476 to your computer and use it in GitHub Desktop.
this keyword in event handler
license: gpl-3.0
height: 170
border: no
<!DOCTYPE html>
<meta charset="utf-8">
<head>
<title>Event handler</title>
</head>
<style>
body {
font-family: "Helvetica Neue", Helvetica, sans-serif;
font-size: 14px;
color: #333;
}
circle {
fill: #ddd;
cursor: pointer;
}
</style>
<body>
<svg width="760" height="140">
<g transform="translate(70, 70)">
<circle r="40" />
<circle r="40" cx="120" />
<circle r="40" cx="240" />
<circle r="40" cx="360" />
<circle r="40" cx="480" />
</g>
</svg>
<div class="status">Click on a circle</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js"></script>
<script>
d3.selectAll('circle')
.on('click', function(d, i) {
d3.select(this)
.style('fill', 'orange')
});
d3.selectAll('circle')
.on('dblclick', function(d, i) {
d3.select(this)
.style('fill', 'gray')
});
</script>
</body>
</html>
�PNG

IHDR��T�bYIDATx���ol��}��sE�slŵ��n�Y"m'a�H<���H&wm��� t�4C�u� ˺��`��t�m �.�j�m���6��u�&�l U\G<T�D�d�T�e��9�\A))���2��_G��>��D���} ��a�Jm�C���i�ADl���#�ڈ�&"����"bt��G#�pD|3"����E�S��^�7ܺu�s;;ggߺٷn���}x�9G����G/����VWW��F�
�S��G����9������ �y9���}�fߺ���mC�n��wF�;"b�K�t��;"�%~.¾��o��[7�Ж
w޿�����"�}q��|�F��KKK��]� ˾u�o��[7������pOD�W��e�������_l;H
�[7��;u�/]�!����{s�[��r*)�Cq�m�~��,%�o��[7��;tM������RJ�9��v�s�Rz8�|�����mg)�}�fߺٷn����=��Ͽ'��x�_\�B[�9pbb⁶�t�}�fߺٷn��˪<���ߗRz_�9�9��'&&��v�.�o��[7��;t]U�\�y��ߊ�K��.//��u�{ݳm���;u�o�� @)�9��Ͽ>��;���
/��9�wLLL|�� m�o��[7��;�����O?=�R����5mgy)䜟�9�~�u�͵��
���}�fߺ������}D�Q�_|O�9?o�h߉�o��[7��;���v��Ł�N)����oDDJ隔��\�v��žu�o��[7�P���k/�Q����
k׼!طn���}�f_JU�x~~�����&�ǭk�^5��;u�o�� @Ɋ��������>�v�6��;11�@�9^
��o��[7�֭�}6��� �Eė#bs�YZ����ǟn;ȅd��o��[7�֭�}6��~:�����7"b�ZU��wطn���}�V�EQ����w��h;GW��X\\|w�9.�~7��;u�o�j�`#)�����jꤦk�Pjꤦk�Pjꤦk�Pjꤦk�PtP�b� �䜷���kr�[�i;��ʾ�fߺٷn��[-�l4E�����G����{D\�v��z~ii�'''���Ű�Yٷn���}�V��Qw����>����Ukɾgeߺٷn��[��lDE�#�}m(@����b)����_,%wTr����J�~��� �?/,,�7���7�uU��3��;u�o݊�`���8"��v����U���RbW%fnK�]���-%vUb��
��~��������v�B,/--]^ʋq���ٷn���}�VԾY��_z饷�/��c�ZgE��y�o��[7�֭�}6�N�WWW��v�Ҕ�YIY����J��%uVR֮(����v�����pD��v���YIY����J��%uVR֮(����v��
���>t��+��y��%��zWoݺ���s��}_<��;u�o�J�`����img(U ݕ���J讄�]UBw%d��+!cW���:{���m(X ݕ���J讄�]UBw%d��+!cW���|���+��2vU ݕ���J讄�]UBw%d�*�t\��׶�`%tWBƮ*��2vU ݕ���J讄�]�;����������J��U%tWBƮ*��2vU ݕ���t�q]>_�v����] ����J��U%tWBƮ*��2v��:�����P��+!cW��] ����J��U%tWBƮ�@�u�<�v����] ����J��U%tWBƮ*��2v��:��`�`�|>�v����] ����J��U%tWBƮ*��2v��:����m(X ݕ���J讄�]UBw%d��+!cW���|�f�
VBw%d��+!cW��] ����J��U��.��i;@�J讄�]UBw%d��+!cW��] �Jw�����P��+!cW��] ����J��U%tWBƮ�@�u��T�
VBw%d��+!cW��] ����J��U��.���v����] ����J��U%tWBƮ*��2v��:���^�7l;C�J讄�]UBw%d��+!cW��] �Jw����֭[����m�(����:;/�}�fߺٷnE� ��u���Ѷ���J��%uVR֮(����vEI����+tP�N�������P��:+)kW��YIY����J��%uVR֮�@:}>r��#��v��,�uV��7��;u�o݊�`#��xrr�hD�n;GAv�uV��7��;u�o݊�`#��x�Cm(H�]���-%vUb涔�U���RbW%fn��
��p.�kD��v��;8>>���C��='���}�fߺ�/�FT������P��;*9��RrG%g�XJ���K����b�@A�8/--}2"�o;G�=��Q��{V���}�fߺ�/�FT�x�%>�v��x�/�a߳�o��[7�֭�}6�"~�����Ŝ�ֶstIJ�жm۶���B���Ͼu�o��[����H��|�{��A5uRӵ\(5uRӵ\(5uRӵ\(5uRӵ\(:(PQw�#"/�|G�9� ���m�~���}���;u�o�j�`�(�p��st��ZU��wطn���}�V�Eq����s�l;G�r����}��o��[7�֭�}6����7����9�?11�@�9^*��o��[7�֭�}6��~�d �%"nm;�E��������b�o��[7��;���;�',//�+"���":�v��}�fߺٷn��TE������}D�QJ隶���r��D�['&&��v��ɾu�o��[7�P���GDLLL|%�|���*土�9߾��ڷn���}�f_JT�8"�뮛���F�?�u0"޺v��}�fߺٷn��4U�#�'zyy�ֈx��,У��˷�γ}kgߺٷn��$������ߗRz_�9�kj��m��"��;u�o�� @�Us�d��9�7"����",�����ٷn���}�f_���pD���ߞRz��,�j-���윁}�fߺٷn��˪�����朷���TRJ�"��m۶�f�YJdߺٷn���}�
q>aaaឈ�+"�j;˚�#������v�طn���}�f_�bC�#"���?:66���x_D��R��q����''''����J���}�fߺ��.�p��-,,�wD����#bwD<4>>��K�\�}kgߺٷn��-�|����G/����VWW��ƅ�����x����ȑ#��ns;�[7��;u�/��):t�M� "b{D\�F�5qeD\�k=�#��LD|-"���/�z��֭[����9;��;u�o�� ]:�OOO[r�W䜿�R�������v�9|������{��'�LOO��9?7�=��ܱc��7m����{��iD4/�Rڵcǎ���^�o߾'�<�����w. ���o��rΟ�����>>55�������K"��###7GD�9?�s���>��M��m�f�Ν;��^.�m)��^���o�����Z:�s9���/E�O��~j8�������.�9ߟR�����MKKK�����������}���W"biӦME���9��z�]�����E|xt���033�i>w���>t��{��9|�-�|hii�m1_���k�NM��d��K�TD�����SJ?c�H���sssO���n������O������l����;v����4"�#9��9�����̎;������yJ�?D���i޿o߾���������~."n��g#�m۶��g>��Sd��رc�:��3q,"����������������/�����7MsG���i������|:h��Wr�#"��s�{nn�w�0gq������kM�<�R�>;;���=n0���x&�|���ܟ ��SJO�����`0�7qWD|<�4�9�rD\>22r]�4[�����#G�\����ώ��N?����Z��"�ɈxMD�BD,GĿ��FFF~�i�W7Ms"������Wr�O����q��vff�G��ٓR�����4��RJ?�s~����N��"�ڵ�^I)�j�y��_�#G���i�٦i~����DD<������IJi�l���W����F�bD�ψ�W9緧�ޖs�cnn��϶�v��n�抈X:v��7���眗fff^�~�w���>4222������W�x�ѣGo���{#����)�����o����4�LDlYYY�;'=���p���p��#�=)��...���^�s޻u��w����N)}0"^8յ�=�DD�enn����>�R�-���������۴iS�R:q��
��k���ϥ�5wE�� /�p�p8�wsss��?���;�g,��:�@�GSJ1::z���`0�zdd�ȱcǎ������W��""~��۞x�o���癙�Ɉk���k�o8~�4Y���o.//������7 {RJ?p�����w�4�{��H�4��?����gff>�С� o��w���k"⅕��/��񟍈K֮��>d�i��>�buu5E�_��-[�l�=55uYD��R�#"����/"���2pzg��������M�߷�c�_=v�؇���q���}׋C�ڵkl׮]c'��Rz0">�1 �>��J)�X}�+^��Ţ����o:񏑑�q�����755�����z��Ws΋9�w��X��{lӦMG�_�ڏG��#��ߊ8�N��RJ_L)�G�=�϶lٲ�:8Gg=���~=��뿝������)�]���;��1�4͏���`0�����y�����޴�y����q��>u�lM�,E��>|��'�633��c9祳]�:)��w#����sssM)�n���|̕q��""b�Νo>|��_�z�W����g��D��_߶m�G��ᇇ��]�^�Os���{̫D�Hg=�ٳ�p��G����ؗv���ק��&���sΏD�|J�O��{���jD<�
�ۦ��^F�R���� M����>���H)���x����O��\�\r��q�š�4==���蚋��������z�ߑ]YY9ݵ�y�Ν;�#�O"bKJ�X�M���8~g����`jjj�{��g"�k����O����A���)�_�����`0x����ۚ��ÔҎ��gzN�\�p����n���������qJ�����҃G��i8��c�|�o"���xD�AJ�@D�X�׻}�޽ϭ����9�?�9���7�|���۳g��~�����Z���M�<��z�7�ݻ�����>�%��zG׽-�z��D�j�4��z��q��������o�����盦ySD|_D SJ�Gij���o=şL�9瓳�s{������ߌ��_�96"��� pѤ�;w��
ox��?���]�v�MNN�,���}&���/��[.�s�SN�k�o|�%w�yg���W���۷o���\��s�S'r�]#��_#7ă����IEND�B`�
�PNG

IHDR�x��� pHYs  ��~��IDATx���}l$g}������K|&���y�MIKD[|�д�Bĝ�)QO�(%P���B�^�"^TP[UEHTTi5ᥠ�Q �^tB�%����]�ھ�|�7���˯�o쳽�=_��#Y��3�wg�y�y�B!�B!�B!��`f
~����Z�Z�k�����s��5�}�7���t=��E��i�����P_>�v��,K#"3�>77�
�uod�!���̡���={�D�5 -�N�W���Y��窅����v�F"z3;fc�Xitt�FD�_����Jr[��J$���R�4��f���i�f8p࢟Kp���r<�����n�q� JӴf6���R0Mh ����4<<LA9���������Mz�UJ��F�?�<oɯ0 C+
W�����l���w���S+++`��}~WӴA�403.\�P4 �˺�?�N�_��/T8f֊��y����'�D�N۲��4�����yi�F��ip�u�㺮�/�8��0WJ� =� �k����1��v��{�� k� "��[3M�I"z0��?tH�6�P.��ξ�q���Z턦ic��%"X�ex�X,>8>>�o��ۻ�)��m:��,K�W,_{���S�t��c���D\�����<h����r�;��=�0>�1Ȱ'�ೳ��4M�D"�D"�&I�q8���ڟ�d�ໆa|vii)JD<H��y���3M�]ןH&�o!���\"�d2op�0�/��눈����b�9sF���d ����y������h8��8�&��{#�����������h�/A�df�4�O:��t6��3���&��D"q<�H<2;;��a7�+v��*�{333�x���T*uK�^������pn���r�Z��R�L&��0���Z�{��Q�q�m�Oe2�����N���,��q�V�D���_T�կ���g�m�̬�R�i�7y���L&�۶�f��pwWI�i���^�;��y�\�]��}�R��^��}UVfV������� D�x.�{/���An�f���m7�ɜ ��J�W��H�FY.���i~9��| @�V�ٞ�m�͸�j��f�I�ӯpjff�i�W׺[�V5"�fff^KDE��T�ٴ��j�I �
�y�[���l6�Ǧi~��^3h��Ri
���dr_�^������j������n�Z_v~�7;;��ț�����I�ӯ��jm����q���:T��N6����n?���wngqq���+��۶�f��W�Վ�>��7��j�Z;�N��뺏���a��~G�$X۶?���N�����ܘ�h�F��LJ���0n""�4����dmc23�r9wyy9ED�K�R�N�c��[����)�? �JÚ�}�T*����… =+Lp����e���V��ťJ�Yn�?@�V�n*��#�0�,O��x��t>���~��h���;��[�u?4��^�ػw/�q�?�d2������K��F����nv���N�{��X,�-���Z�������\�Z���d2#���nkSSS��y��E��T�շd2�C�=�f � M�E"���Qڶ���0���X�Z��ތKq�"��a�6|x~~>�k�y��E�4_���V���;���ۋ��u0��+��x:�&".�J#���!o�;�$7R�V=f~O�Tz л3""^XX�y�������ߛ��E����H$�U*�7��y=���Z�$"oee%��o�t:����kŇ{xj���[�af�r�j@� θ��7̩v�}�Wn�Z �{G, �v��nf�"�Hֶ�����%���h�y�[u]�p\�O.@,��y��5S�.Z��=^�o�pY;Y�k��g�����r�v�)�T*.\a��������1��gϞ8�v��v34��8�;��5h.��l�|G��00������I"��� 0??�e�\~�b��=����n�|���������r9��#oc����if(G��`ll,���H$o �0�z^��L��ozA:z�={� {��Ⱦs��<Ѹ�љ���l9�3�sss#��a]P� ���1 #366�n6��sݹ���}����CA� �1dl�%�����<p�_F�� ���lr� m�A' �u���y�D)5@m�0�� $��������-gp�z� �|%��X,��5��89�P�0p�䗡+���� ^��Ҏ��W������P��a]�TJ�w�\���J��������� gvc���k:�T�����Q�!���?�E�r="���ahh�!"�
s���:#B�5L"*��D��%��r$�����v���I�`O��z ���
�ӯ�\K�l��_����3�u���[�D��Q=�ؘ��466v@՟�JF&�י�ne��R��E"��E�m�Ar}.��V�bp
X�@fǙWJ�7� Nk6�`�� �n[�&&&�xiCO�OnpiE�'�~�����F�������m�%H�<����g��{����ܰ �Bs��Й�to];�֏���Nefrrr��2����ccc+���d���׹��v3�j�v{>�~ L��r��L�$ �� � ���j�V|�Wn*�
�8�{�𞫟\@�NJ��?�2wdd$8���@��\�uD�p��4M r�,��u[V?�o8�I&�`�G��Yr�g����Q��z�Z�ZDA���d�oVY�:>>^^XX�
�B��8M����g5Mӱ�q�4׍�bPJ=^(~�̴]n0JH&��Y��B4հ��h]%����y�ӓ��O���.�P(�p*��wF��D"����K�D��r'&&���y555�<��/Մ��Ns]M�"�Z�B���+ s������U>������k�o �l��,�������|��߿��{DĕJE�����+���*͎r#���j�.��a8�|υgfu� 74|��n�6fo�u�R�eY.}p�7��h��A˲ڛtF[�{u����߷o_u'7����z~�GWWW�F�Q�wF[��m�l>155e�9sF nm�g�ɟ�Ÿ����j���r��qao�c��Ҳ�M��:55���k[���.
�j4���d4��O�l��Dt۶]��}���vrk���Y�m��d2 "�6�;�p����t]�?�����V'�6�efV����������g.�J�����e�P��}tG��q�w�ok�۝P��,7�{�+����?
����}���`�Ǿ(�L�###'���c���F���y�w���� ��u]%�Iݲ,C)utrr��AN&���j��4�b��FDj�\W�u�H$t۶�xS>��f?�X7��l���Sfv�񸦺���j�����y�j��y{�P��_V?�����m��n=�H蚦�pV�wG)������
�§�˰����*��w:�3�DB�u]��'�,��(�i�H�j���t:���4O �7�1"���X,��<�~��gϞ��yp]D]��j�`Y֒�8_�F�_�Q����i��k����l6JDpg-��n��jU�y"�~d||�4hn�X�|>�SSS�7 �9˲> ��t:�i� �D"�m�f��j�N�H�P��~��ixx��r���V����L�R� t]��y���eY?PJ},��������Z��6>U,om�Z�pw"��.�i�〙��bP�V�v��c"�D�Px X���U��EB����õZ�+���o�V�������M�яt]lrr�����_;AD�j��u]���'<a��]�z��֯,�=�"���z<���������|�����}w����f����:t�v��WӴoMNN>�g�
:<<����jtt�o.�J�VWW�3�M�����QJ}'�ϟ
���(DĵZMe��
����_�,��V��*�t"�1s��N绯3 �'i��R�R�l���������n?;��i�X�3sd�tW��|�ϝ;s'�k�+a�6�;wnݲ�j����J�j��e��]YY�T*��&���ן7̬1��h۶fF�jn0k]3�J��<諾ڢ\.k����r-�R ���J �p]3���\dqq�-�Z��r�1 c-�Ǭ�� ��3S�yƗ5�q�k�{-��*��n�˞�B!���-��"�$B�'N����םe<|���뮻ԭ�ު<xP��C��{w`zzz���C��Çk�|t��1y ���СC�~�����֝B?x�`�Wj!vF���>
�=ϻazzz�����afC)�}f�� �T��F�q_��^������3����.3sB)�Գ�>ۺv�%�/6�f":�f�D4
�W����op��_�l6�Q�|oD�v�4���p�Ɗ�o�]�;�����6�}���{��9KD�4-Q��W�(�u�臚��0���o"Z"��-,,x�r��-�B����'Oҋ/�HJ)�馛�����U"��m���3�0=zT�����>�G�Q�����K/����|��1���u]\�x��~�iy�]!�B!�B!�B!�B!�B!�B!�B!�B!�B!�B!�B!�B!�B!�B!�B!�B!�B!�B!�B!�B!�B!�B!�B!�B!�B!�B!�B!�B!�B!�B!�B!�B!�B!�B���?4[O����IEND�B`�
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment