我正在努力让我的svg中的所有圈子都可点击，这是一个游戏项目，所以当用户点击下面的svg中的任何一个圈子时，我想能够添加一个图像作为该圈子的背景还记录点击的圆圈。 这是一个熟悉的游戏morabaraba，如果有一个简单的方法你知道简单地创建它的平板请告知。没有3D图形只需要一个简单的平板morabaraba板。
<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg">
<circle id="svg_56" r="21.561028" cy="25" cx="26" stroke-linecap="null" stroke-linejoin="null" stroke-width="5" stroke="#000000" fill="none"/>
<circle id="svg_57" r="21.561028" cy="456" cx="25" stroke-linecap="null" stroke-linejoin="null" stroke-width="5" stroke="#000000" fill="none"/>
<circle id="svg_58" r="21.561028" cy="455" cx="615" stroke-linecap="null" stroke-linejoin="null" stroke-width="5" stroke="#000000" fill="none"/>
<circle id="svg_59" r="21.561028" cy="25" cx="615" stroke-linecap="null" stroke-linejoin="null" stroke-width="5" stroke="#000000" fill="none"/>
<circle id="svg_60" r="21.561028" cy="25" cx="301" stroke-linecap="null" stroke-linejoin="null" stroke-width="5" stroke="#000000" fill="none"/>
<circle id="svg_61" r="21.561028" cy="455" cx="301" stroke-linecap="null" stroke-linejoin="null" stroke-width="5" stroke="#000000" fill="none"/>
<circle id="svg_62" r="21.561028" cy="250" cx="24" stroke-linecap="null" stroke-linejoin="null" stroke-width="5" stroke="#000000" fill="none"/>
<circle id="svg_63" r="21.561028" cy="250" cx="615" stroke-linecap="null" stroke-linejoin="null" stroke-width="5" stroke="#000000" fill="none"/>
<line id="svg_64" y2="227" x2="21" y1="50" x1="22" stroke-linecap="null" stroke-linejoin="null" stroke-width="5" stroke="#000000" fill="none"/>
<line id="svg_65" y2="432.5" x2="21.5" y1="270.5" x1="22.5" stroke-linecap="null" stroke-linejoin="null" stroke-width="5" stroke="#000000" fill="none"/>
<line id="svg_66" y2="228.5" x2="615.5" y1="51.5" x1="616.5" stroke-linecap="null" stroke-linejoin="null" stroke-width="5" stroke="#000000" fill="none"/>
<line id="svg_67" y2="430.999991" x2="619" y1="274.000002" x1="617" stroke-linecap="null" stroke-linejoin="null" stroke-width="5" stroke="#000000" fill="none"/>
<line id="svg_68" y2="458" x2="278" y1="457" x1="51" stroke-linecap="null" stroke-linejoin="null" stroke-width="5" stroke="#000000" fill="none"/>
<line id="svg_69" y2="460" x2="591" y1="459" x1="325" stroke-linecap="null" stroke-linejoin="null" stroke-width="5" stroke="#000000" fill="none"/>
<line id="svg_70" y2="18" x2="278" y1="18" x1="51" stroke-linecap="null" stroke-linejoin="null" stroke-width="5" stroke="#000000" fill="none"/>
<line id="svg_71" y2="23" x2="590" y1="21" x1="325" stroke-linecap="null" stroke-linejoin="null" stroke-width="5" stroke="#000000" fill="none"/>
<circle id="svg_73" r="21.561028" cy="101" cx="104" stroke-linecap="null" stroke-linejoin="null" stroke-width="5" stroke="#000000" fill="none"/>
<circle id="svg_74" r="21.561028" cy="102" cx="302" stroke-linecap="null" stroke-linejoin="null" stroke-width="5" stroke="#000000" fill="none"/>
<circle id="svg_75" r="21.561028" cy="102" cx="499" stroke-linecap="null" stroke-linejoin="null" stroke-width="5" stroke="#000000" fill="none"/>
<circle id="svg_76" r="21.561028" cy="383" cx="106" stroke-linecap="null" stroke-linejoin="null" stroke-width="5" stroke="#000000" fill="none"/>
<circle id="svg_77" r="21.561028" cy="387" cx="502" stroke-linecap="null" stroke-linejoin="null" stroke-width="5" stroke="#000000" fill="none"/>
<circle id="svg_78" r="21.561028" cy="384" cx="301" stroke-linecap="null" stroke-linejoin="null" stroke-width="5" stroke="#000000" fill="none"/>
<circle id="svg_79" r="21.561028" cy="250" cx="103" stroke-linecap="null" stroke-linejoin="null" stroke-width="5" stroke="#000000" fill="none"/>
<circle id="svg_80" r="21.561028" cy="252" cx="504" stroke-linecap="null" stroke-linejoin="null" stroke-width="5" stroke="#000000" fill="none"/>
<line id="svg_81" y2="227" x2="100" y1="126" x1="101" stroke-linecap="null" stroke-linejoin="null" stroke-width="5" stroke="#000000" fill="none"/>
<line id="svg_82" y2="362" x2="98" y1="273" x1="98" stroke-linecap="null" stroke-linejoin="null" stroke-width="5" stroke="#000000" fill="none"/>
<line id="svg_83" y2="387" x2="277" y1="385" x1="131" stroke-linecap="null" stroke-linejoin="null" stroke-width="5" stroke="#000000" fill="none"/>
<line id="svg_84" y2="387" x2="478" y1="384" x1="325" stroke-linecap="null" stroke-linejoin="null" stroke-width="5" stroke="#000000" fill="none"/>
<line id="svg_85" y2="363" x2="501" y1="278" x1="499" stroke-linecap="null" stroke-linejoin="null" stroke-width="5" stroke="#000000" fill="none"/>
<line id="svg_86" y2="230" x2="499" y1="127" x1="497" stroke-linecap="null" stroke-linejoin="null" stroke-width="5" stroke="#000000" fill="none"/>
<line id="svg_87" y2="102" x2="326" y1="102" x1="474" stroke-linecap="null" stroke-linejoin="null" stroke-width="5" stroke="#000000" fill="none"/>
<line id="svg_88" y2="99" x2="127" y1="100" x1="276" stroke-linecap="null" stroke-linejoin="null" stroke-width="5" stroke="#000000" fill="none"/>
<line id="svg_89" y2="85" x2="86" y1="41" x1="44" stroke-linecap="null" stroke-linejoin="null" stroke-width="5" stroke="#000000" fill="none"/>
<line id="svg_90" y2="80" x2="300" y1="50" x1="299" stroke-linecap="null" stroke-linejoin="null" stroke-width="5" stroke="#000000" fill="none"/>
<line id="svg_91" y2="90" x2="519" y1="44" x1="601" stroke-linecap="null" stroke-linejoin="null" stroke-width="5" stroke="#000000" fill="none"/>
<line id="svg_92" y2="253" x2="527" y1="251" x1="590" stroke-linecap="null" stroke-linejoin="null" stroke-width="5" stroke="#000000" fill="none"/>
<line id="svg_93" y2="399" x2="522" y1="437" x1="594" stroke-linecap="null" stroke-linejoin="null" stroke-width="5" stroke="#000000" fill="none"/>
<line id="svg_94" y2="432" x2="300" y1="407" x1="300" stroke-linecap="null" stroke-linejoin="null" stroke-width="5" stroke="#000000" fill="none"/>
<line id="svg_95" y2="398" x2="90" y1="437" x1="41" stroke-linecap="null" stroke-linejoin="null" stroke-width="5" stroke="#000000" fill="none"/>
<line id="svg_96" y2="250" x2="81" y1="250" x1="48" stroke-linecap="null" stroke-linejoin="null" stroke-width="5" stroke="#000000" fill="none"/>
<circle id="svg_97" r="21.561028" cy="173.000008" cx="180.000008" stroke-linecap="null" stroke-linejoin="null" stroke-width="5" stroke="#000000" fill="none"/>
<circle id="svg_98" r="21.561028" cy="250.000008" cx="181.000008" stroke-linecap="null" stroke-linejoin="null" stroke-width="5" stroke="#000000" fill="none"/>
<circle id="svg_99" r="21.561028" cy="322.000008" cx="180.000008" stroke-linecap="null" stroke-linejoin="null" stroke-width="5" stroke="#000000" fill="none"/>
<circle id="svg_100" r="21.561028" cy="172" cx="302.000008" stroke-linecap="null" stroke-linejoin="null" stroke-width="5" stroke="#000000" fill="none"/>
<circle id="svg_101" r="21.561028" cy="172.000008" cx="407.000008" stroke-linecap="null" stroke-linejoin="null" stroke-width="5" stroke="#000000" fill="none"/>
<circle id="svg_102" r="21.561028" cy="323.000008" cx="302.000008" stroke-linecap="null" stroke-linejoin="null" stroke-width="5" stroke="#000000" fill="none"/>
<circle id="svg_103" r="21.561028" cy="323.000008" cx="413.000008" stroke-linecap="null" stroke-linejoin="null" stroke-width="5" stroke="#000000" fill="none"/>
<circle id="svg_104" r="21.561028" cy="255" cx="410.000008" stroke-linecap="null" stroke-linejoin="null" stroke-width="5" stroke="#000000" fill="none"/>
<line id="svg_105" y2="174" x2="278" y1="172" x1="206" stroke-linecap="null" stroke-linejoin="null" stroke-width="5" stroke="#000000" fill="none"/>
<line id="svg_106" y2="174" x2="384" y1="173" x1="327" stroke-linecap="null" stroke-linejoin="null" stroke-width="5" stroke="#000000" fill="none"/>
<line id="svg_107" y2="226" x2="180" y1="197" x1="179" stroke-linecap="null" stroke-linejoin="null" stroke-width="5" stroke="#000000" fill="none"/>
<line id="svg_108" y2="298" x2="180" y1="274" x1="180" stroke-linecap="null" stroke-linejoin="null" stroke-width="5" stroke="#000000" fill="none"/>
<line id="svg_109" y2="327" x2="278" y1="326" x1="205" stroke-linecap="null" stroke-linejoin="null" stroke-width="5" stroke="#000000" fill="none"/>
<line id="svg_110" y2="325" x2="389" y1="323" x1="326" stroke-linecap="null" stroke-linejoin="null" stroke-width="5" stroke="#000000" fill="none"/>
<line id="svg_111" y2="301" x2="413" y1="278" x1="413" stroke-linecap="null" stroke-linejoin="null" stroke-width="5" stroke="#000000" fill="none"/>
<line id="svg_112" y2="231" x2="409" y1="197" x1="408" stroke-linecap="null" stroke-linejoin="null" stroke-width="5" stroke="#000000" fill="none"/>
<line id="svg_113" y2="252" x2="156" y1="251" x1="128" stroke-linecap="null" stroke-linejoin="null" stroke-width="5" stroke="#000000" fill="none"/>
<line id="svg_114" y2="158" x2="162" y1="119" x1="121" stroke-linecap="null" stroke-linejoin="null" stroke-width="5" stroke="#000000" fill="none"/>
<line id="svg_115" y2="338" x2="162" y1="365" x1="125" stroke-linecap="null" stroke-linejoin="null" stroke-width="5" stroke="#000000" fill="none"/>
<line id="svg_116" y2="361" x2="301" y1="345" x1="301" stroke-linecap="null" stroke-linejoin="null" stroke-width="5" stroke="#000000" fill="none"/>
<line id="svg_117" y2="372" x2="483" y1="336" x1="434" stroke-linecap="null" stroke-linejoin="null" stroke-width="5" stroke="#000000" fill="none"/>
<line id="svg_118" y2="251" x2="479" y1="252" x1="435" stroke-linecap="null" stroke-linejoin="null" stroke-width="5" stroke="#000000" fill="none"/>
<line id="svg_119" y2="157" x2="426" y1="120" x1="480" stroke-linecap="null" stroke-linejoin="null" stroke-width="5" stroke="#000000" fill="none"/>
<line id="svg_120" y2="148" x2="303" y1="124" x1="302" stroke-linecap="null" stroke-linejoin="null" stroke-width="5" stroke="#000000" fill="none"/>
</svg>
提前致谢
答案 0 :(得分：2)
像
这样的东西d3.selectAll('circle)
.on('click', function(d,i){
...implementation comes here...
});
应该做的伎俩。 d将包含对点击圈子的引用。