mirror of
https://gitee.com/antv/g6.git
synced 2024-12-01 19:28:39 +08:00
feat: click element behavior support setting neighborSelectedState
This commit is contained in:
parent
59e8bcd6a0
commit
88271812a1
@ -0,0 +1,703 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" style="background: transparent; position: absolute; outline: none;" color-interpolation-filters="sRGB" tabindex="1">
|
||||
<defs/>
|
||||
<g >
|
||||
<g fill="none">
|
||||
<g fill="none"/>
|
||||
<g fill="none">
|
||||
<g fill="none" marker-start="false" marker-end="false">
|
||||
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
|
||||
<g>
|
||||
<path fill="none" d="M 332.650583411075,289.9425596579931 L 336.65379891314376,305.84644180685063" stroke-width="12" stroke="rgba(153,173,209,1)" stroke-opacity="0.25" stroke-dasharray="0,0" pointer-events="none"/>
|
||||
<path fill="none" d="M 332.650583411075,289.9425596579931 L 336.65379891314376,305.84644180685063" stroke-width="14" stroke="transparent" stroke-opacity="0.25" stroke-dasharray="0,0" pointer-events="none"/>
|
||||
</g>
|
||||
<g>
|
||||
<path fill="none" d="M 332.650583411075,289.9425596579931 L 336.65379891314376,305.84644180685063" stroke-width="1" stroke="rgba(153,173,209,1)"/>
|
||||
<path fill="none" d="M 10,0 L 10,0" stroke-width="3" stroke="transparent"/>
|
||||
</g>
|
||||
</g>
|
||||
<g fill="none" marker-start="false" marker-end="false">
|
||||
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
|
||||
<g>
|
||||
<path fill="none" d="M 339.9938428674067,282.31108817493833 L 361.1841966833745,286.7856220301398" stroke-width="12" stroke="rgba(153,173,209,1)" stroke-opacity="0.25" stroke-dasharray="0,0" pointer-events="none"/>
|
||||
<path fill="none" d="M 339.9938428674067,282.31108817493833 L 361.1841966833745,286.7856220301398" stroke-width="14" stroke="transparent" stroke-opacity="0.25" stroke-dasharray="0,0" pointer-events="none"/>
|
||||
</g>
|
||||
<g>
|
||||
<path fill="none" d="M 339.9938428674067,282.31108817493833 L 361.1841966833745,286.7856220301398" stroke-width="1" stroke="rgba(153,173,209,1)"/>
|
||||
<path fill="none" d="M 10,0 L 10,0" stroke-width="3" stroke="transparent"/>
|
||||
</g>
|
||||
</g>
|
||||
<g fill="none" marker-start="false" marker-end="false">
|
||||
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
|
||||
<g>
|
||||
<path fill="none" d="M 336.69957818245064,287.85295433399017 L 356.41629706169,310.96592383983796" stroke-width="12" stroke="rgba(153,173,209,1)" stroke-opacity="0.25" stroke-dasharray="0,0" pointer-events="none"/>
|
||||
<path fill="none" d="M 336.69957818245064,287.85295433399017 L 356.41629706169,310.96592383983796" stroke-width="14" stroke="transparent" stroke-opacity="0.25" stroke-dasharray="0,0" pointer-events="none"/>
|
||||
</g>
|
||||
<g>
|
||||
<path fill="none" d="M 336.69957818245064,287.85295433399017 L 356.41629706169,310.96592383983796" stroke-width="1" stroke="rgba(153,173,209,1)"/>
|
||||
<path fill="none" d="M 10,0 L 10,0" stroke-width="3" stroke="transparent"/>
|
||||
</g>
|
||||
</g>
|
||||
<g fill="none" marker-start="false" marker-end="false">
|
||||
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
|
||||
<g>
|
||||
<path fill="none" d="M 339.7580499244718,277.2740288327925 L 381.2849188255282,264.3528327394731" stroke-width="12" stroke="rgba(153,173,209,1)" stroke-opacity="0.25" stroke-dasharray="0,0" pointer-events="none"/>
|
||||
<path fill="none" d="M 339.7580499244718,277.2740288327925 L 381.2849188255282,264.3528327394731" stroke-width="14" stroke="transparent" stroke-opacity="0.25" stroke-dasharray="0,0" pointer-events="none"/>
|
||||
</g>
|
||||
<g>
|
||||
<path fill="none" d="M 339.7580499244718,277.2740288327925 L 381.2849188255282,264.3528327394731" stroke-width="1" stroke="rgba(153,173,209,1)"/>
|
||||
<path fill="none" d="M 10,0 L 10,0" stroke-width="3" stroke="transparent"/>
|
||||
</g>
|
||||
</g>
|
||||
<g fill="none" marker-start="false" marker-end="false">
|
||||
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
|
||||
<g>
|
||||
<path fill="none" d="M 340.12249647073156,281.56201439406976 L 384.27743639059656,287.42812842819586" stroke-width="12" stroke="rgba(153,173,209,1)" stroke-opacity="0.25" stroke-dasharray="0,0" pointer-events="none"/>
|
||||
<path fill="none" d="M 340.12249647073156,281.56201439406976 L 384.27743639059656,287.42812842819586" stroke-width="14" stroke="transparent" stroke-opacity="0.25" stroke-dasharray="0,0" pointer-events="none"/>
|
||||
</g>
|
||||
<g>
|
||||
<path fill="none" d="M 340.12249647073156,281.56201439406976 L 384.27743639059656,287.42812842819586" stroke-width="1" stroke="rgba(153,173,209,1)"/>
|
||||
<path fill="none" d="M 10,0 L 10,0" stroke-width="3" stroke="transparent"/>
|
||||
</g>
|
||||
</g>
|
||||
<g fill="none" marker-start="false" marker-end="false">
|
||||
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
|
||||
<g>
|
||||
<path fill="none" d="M 338.51690131513084,274.67831049230784 L 356.1711174836973,262.84817876550466" stroke-width="12" stroke="rgba(153,173,209,1)" stroke-opacity="0.25" stroke-dasharray="0,0" pointer-events="none"/>
|
||||
<path fill="none" d="M 338.51690131513084,274.67831049230784 L 356.1711174836973,262.84817876550466" stroke-width="14" stroke="transparent" stroke-opacity="0.25" stroke-dasharray="0,0" pointer-events="none"/>
|
||||
</g>
|
||||
<g>
|
||||
<path fill="none" d="M 338.51690131513084,274.67831049230784 L 356.1711174836973,262.84817876550466" stroke-width="1" stroke="rgba(153,173,209,1)"/>
|
||||
<path fill="none" d="M 10,0 L 10,0" stroke-width="3" stroke="transparent"/>
|
||||
</g>
|
||||
</g>
|
||||
<g fill="none" marker-start="false" marker-end="false">
|
||||
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
|
||||
<g>
|
||||
<path fill="none" d="M 327.44200808400853,289.854450731398 L 321.1157922089602,311.81983515727387" stroke-width="12" stroke="rgba(153,173,209,1)" stroke-opacity="0.25" stroke-dasharray="0,0" pointer-events="none"/>
|
||||
<path fill="none" d="M 327.44200808400853,289.854450731398 L 321.1157922089602,311.81983515727387" stroke-width="14" stroke="transparent" stroke-opacity="0.25" stroke-dasharray="0,0" pointer-events="none"/>
|
||||
</g>
|
||||
<g>
|
||||
<path fill="none" d="M 327.44200808400853,289.854450731398 L 321.1157922089602,311.81983515727387" stroke-width="1" stroke="rgba(153,173,209,1)"/>
|
||||
<path fill="none" d="M 10,0 L 10,0" stroke-width="3" stroke="transparent"/>
|
||||
</g>
|
||||
</g>
|
||||
<g fill="none" marker-start="false" marker-end="false">
|
||||
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
|
||||
<g>
|
||||
<path fill="none" d="M 321.9942161117886,274.54351651677905 L 310.510819288602,266.5739456414241" stroke-width="12" stroke="rgba(153,173,209,1)" stroke-opacity="0.25" stroke-dasharray="0,0" pointer-events="none"/>
|
||||
<path fill="none" d="M 321.9942161117886,274.54351651677905 L 310.510819288602,266.5739456414241" stroke-width="14" stroke="transparent" stroke-opacity="0.25" stroke-dasharray="0,0" pointer-events="none"/>
|
||||
</g>
|
||||
<g>
|
||||
<path fill="none" d="M 321.9942161117886,274.54351651677905 L 310.510819288602,266.5739456414241" stroke-width="1" stroke="rgba(153,173,209,1)"/>
|
||||
<path fill="none" d="M 10,0 L 10,0" stroke-width="3" stroke="transparent"/>
|
||||
</g>
|
||||
</g>
|
||||
<g fill="none" marker-start="false" marker-end="false">
|
||||
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
|
||||
<g>
|
||||
<path fill="none" d="M 321.20027867596497,275.9054450752487 L 275.3929220076288,253.8409385917435" stroke-width="12" stroke="rgba(153,173,209,1)" stroke-opacity="0.25" stroke-dasharray="0,0" pointer-events="none"/>
|
||||
<path fill="none" d="M 321.20027867596497,275.9054450752487 L 275.3929220076288,253.8409385917435" stroke-width="14" stroke="transparent" stroke-opacity="0.25" stroke-dasharray="0,0" pointer-events="none"/>
|
||||
</g>
|
||||
<g>
|
||||
<path fill="none" d="M 321.20027867596497,275.9054450752487 L 275.3929220076288,253.8409385917435" stroke-width="1" stroke="rgba(153,173,209,1)"/>
|
||||
<path fill="none" d="M 10,0 L 10,0" stroke-width="3" stroke="transparent"/>
|
||||
</g>
|
||||
</g>
|
||||
<g fill="none" marker-start="false" marker-end="false">
|
||||
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
|
||||
<g>
|
||||
<path fill="none" d="M 320.22154300511824,280.73375115922863 L 264.32777340113176,283.46851934858387" stroke-width="12" stroke="rgba(153,173,209,1)" stroke-opacity="0.25" stroke-dasharray="0,0" pointer-events="none"/>
|
||||
<path fill="none" d="M 320.22154300511824,280.73375115922863 L 264.32777340113176,283.46851934858387" stroke-width="14" stroke="transparent" stroke-opacity="0.25" stroke-dasharray="0,0" pointer-events="none"/>
|
||||
</g>
|
||||
<g>
|
||||
<path fill="none" d="M 320.22154300511824,280.73375115922863 L 264.32777340113176,283.46851934858387" stroke-width="1" stroke="rgba(153,173,209,1)"/>
|
||||
<path fill="none" d="M 10,0 L 10,0" stroke-width="3" stroke="transparent"/>
|
||||
</g>
|
||||
</g>
|
||||
<g fill="none" marker-start="false" marker-end="false">
|
||||
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
|
||||
<g>
|
||||
<path fill="none" d="M 333.1342211929674,270.6822866773431 L 341.3418225082045,243.84556061269595" stroke-width="12" stroke="rgba(153,173,209,1)" stroke-opacity="0.25" stroke-dasharray="0,0" pointer-events="none"/>
|
||||
<path fill="none" d="M 333.1342211929674,270.6822866773431 L 341.3418225082045,243.84556061269595" stroke-width="14" stroke="transparent" stroke-opacity="0.25" stroke-dasharray="0,0" pointer-events="none"/>
|
||||
</g>
|
||||
<g>
|
||||
<path fill="none" d="M 333.1342211929674,270.6822866773431 L 341.3418225082045,243.84556061269595" stroke-width="1" stroke="rgba(153,173,209,1)"/>
|
||||
<path fill="none" d="M 10,0 L 10,0" stroke-width="3" stroke="transparent"/>
|
||||
</g>
|
||||
</g>
|
||||
<g fill="none" marker-start="false" marker-end="false">
|
||||
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
|
||||
<g>
|
||||
<path fill="none" d="M 321.1922712381789,284.5680038857596 L 299.48341845908675,294.9753310751779" stroke-width="12" stroke="rgba(153,173,209,1)" stroke-opacity="0.25" stroke-dasharray="0,0" pointer-events="none"/>
|
||||
<path fill="none" d="M 321.1922712381789,284.5680038857596 L 299.48341845908675,294.9753310751779" stroke-width="14" stroke="transparent" stroke-opacity="0.25" stroke-dasharray="0,0" pointer-events="none"/>
|
||||
</g>
|
||||
<g>
|
||||
<path fill="none" d="M 321.1922712381789,284.5680038857596 L 299.48341845908675,294.9753310751779" stroke-width="1" stroke="rgba(153,173,209,1)"/>
|
||||
<path fill="none" d="M 10,0 L 10,0" stroke-width="3" stroke="transparent"/>
|
||||
</g>
|
||||
</g>
|
||||
<g fill="none" marker-start="false" marker-end="false">
|
||||
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
|
||||
<g>
|
||||
<path fill="none" d="M 337.6456340639597,286.93125978166 L 348.4643207700247,296.65901121443375" stroke-width="12" stroke="rgba(153,173,209,1)" stroke-opacity="0.25" stroke-dasharray="0,0" pointer-events="none"/>
|
||||
<path fill="none" d="M 337.6456340639597,286.93125978166 L 348.4643207700247,296.65901121443375" stroke-width="14" stroke="transparent" stroke-opacity="0.25" stroke-dasharray="0,0" pointer-events="none"/>
|
||||
</g>
|
||||
<g>
|
||||
<path fill="none" d="M 337.6456340639597,286.93125978166 L 348.4643207700247,296.65901121443375" stroke-width="1" stroke="rgba(153,173,209,1)"/>
|
||||
<path fill="none" d="M 10,0 L 10,0" stroke-width="3" stroke="transparent"/>
|
||||
</g>
|
||||
</g>
|
||||
<g fill="none" marker-start="false" marker-end="false">
|
||||
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
|
||||
<g>
|
||||
<path fill="none" d="M 320.72044534152894,277.08973620842096 L 257.2794478469476,255.99441601325876" stroke-width="12" stroke="rgba(153,173,209,1)" stroke-opacity="0.25" stroke-dasharray="0,0" pointer-events="none"/>
|
||||
<path fill="none" d="M 320.72044534152894,277.08973620842096 L 257.2794478469476,255.99441601325876" stroke-width="14" stroke="transparent" stroke-opacity="0.25" stroke-dasharray="0,0" pointer-events="none"/>
|
||||
</g>
|
||||
<g>
|
||||
<path fill="none" d="M 320.72044534152894,277.08973620842096 L 257.2794478469476,255.99441601325876" stroke-width="1" stroke="rgba(153,173,209,1)"/>
|
||||
<path fill="none" d="M 10,0 L 10,0" stroke-width="3" stroke="transparent"/>
|
||||
</g>
|
||||
</g>
|
||||
<g fill="none" marker-start="false" marker-end="false">
|
||||
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
|
||||
<g>
|
||||
<path fill="none" d="M 368.35053578372714,298.50290020313963 L 365.52418955806974,308.9225758710791" stroke-width="1" stroke="rgba(153,173,209,1)" fill-opacity="0.25" stroke-opacity="0.25"/>
|
||||
<path fill="none" d="M 10,0 L 10,0" stroke-width="3" stroke="transparent" fill-opacity="0.25" stroke-opacity="0.25"/>
|
||||
</g>
|
||||
</g>
|
||||
<g fill="none" marker-start="false" marker-end="false">
|
||||
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
|
||||
<g>
|
||||
<path fill="none" d="M 392.0510581757449,271.3073908084629 L 392.9726539824582,278.81950128138084" stroke-width="1" stroke="rgba(153,173,209,1)" fill-opacity="0.25" stroke-opacity="0.25"/>
|
||||
<path fill="none" d="M 10,0 L 10,0" stroke-width="3" stroke="transparent" fill-opacity="0.25" stroke-opacity="0.25"/>
|
||||
</g>
|
||||
</g>
|
||||
<g fill="none" marker-start="false" marker-end="false">
|
||||
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
|
||||
<g>
|
||||
<path fill="none" d="M 400.5078694813476,263.91244518782185 L 422.02698159287115,269.54138171647503" stroke-width="1" stroke="rgba(153,173,209,1)" fill-opacity="0.25" stroke-opacity="0.25"/>
|
||||
<path fill="none" d="M 10,0 L 10,0" stroke-width="3" stroke="transparent" fill-opacity="0.25" stroke-opacity="0.25"/>
|
||||
</g>
|
||||
</g>
|
||||
<g fill="none" marker-start="false" marker-end="false">
|
||||
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
|
||||
<g>
|
||||
<path fill="none" d="M 403.3283227111816,284.68340747515725 L 422.56349247436526,276.1337006791396" stroke-width="1" stroke="rgba(153,173,209,1)" fill-opacity="0.25" stroke-opacity="0.25"/>
|
||||
<path fill="none" d="M 10,0 L 10,0" stroke-width="3" stroke="transparent" fill-opacity="0.25" stroke-opacity="0.25"/>
|
||||
</g>
|
||||
</g>
|
||||
<g fill="none" marker-start="false" marker-end="false">
|
||||
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
|
||||
<g>
|
||||
<path fill="none" d="M 357.8770849923209,249.7699537337608 L 350.8677880545541,241.79427050940328" stroke-width="1" stroke="rgba(153,173,209,1)" fill-opacity="0.25" stroke-opacity="0.25"/>
|
||||
<path fill="none" d="M 10,0 L 10,0" stroke-width="3" stroke="transparent" fill-opacity="0.25" stroke-opacity="0.25"/>
|
||||
</g>
|
||||
</g>
|
||||
<g fill="none" marker-start="false" marker-end="false">
|
||||
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
|
||||
<g>
|
||||
<path fill="none" d="M 310.51563002944954,315.2122561592677 L 298.29867050765984,305.51525238565415" stroke-width="1" stroke="rgba(153,173,209,1)" fill-opacity="0.25" stroke-opacity="0.25"/>
|
||||
<path fill="none" d="M 10,0 L 10,0" stroke-width="3" stroke="transparent" fill-opacity="0.25" stroke-opacity="0.25"/>
|
||||
</g>
|
||||
</g>
|
||||
<g fill="none" marker-start="false" marker-end="false">
|
||||
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
|
||||
<g>
|
||||
<path fill="none" d="M 292.76194182843284,257.8537308386963 L 275.91710480242654,252.5200026818115" stroke-width="1" stroke="rgba(153,173,209,1)" fill-opacity="0.25" stroke-opacity="0.25"/>
|
||||
<path fill="none" d="M 10,0 L 10,0" stroke-width="3" stroke="transparent" fill-opacity="0.25" stroke-opacity="0.25"/>
|
||||
</g>
|
||||
</g>
|
||||
<g fill="none" marker-start="false" marker-end="false">
|
||||
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
|
||||
<g>
|
||||
<path fill="none" d="M 256.40626874696636,248.8284663130213 L 191.7643092559633,244.46908007369746" stroke-width="1" stroke="rgba(153,173,209,1)" fill-opacity="0.25" stroke-opacity="0.25"/>
|
||||
<path fill="none" d="M 10,0 L 10,0" stroke-width="3" stroke="transparent" fill-opacity="0.25" stroke-opacity="0.25"/>
|
||||
</g>
|
||||
</g>
|
||||
<g fill="none" marker-start="false" marker-end="false">
|
||||
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
|
||||
<g>
|
||||
<path fill="none" d="M 270.7373386450179,258.50382781631777 L 286.11236228271645,290.2957785069244" stroke-width="1" stroke="rgba(153,173,209,1)" fill-opacity="0.25" stroke-opacity="0.25"/>
|
||||
<path fill="none" d="M 10,0 L 10,0" stroke-width="3" stroke="transparent" fill-opacity="0.25" stroke-opacity="0.25"/>
|
||||
</g>
|
||||
</g>
|
||||
<g fill="none" marker-start="false" marker-end="false">
|
||||
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
|
||||
<g>
|
||||
<path fill="none" d="M 274.79794162654554,244.09772175175831 L 296.4672561273607,230.181895557812" stroke-width="1" stroke="rgba(153,173,209,1)" fill-opacity="0.25" stroke-opacity="0.25"/>
|
||||
<path fill="none" d="M 10,0 L 10,0" stroke-width="3" stroke="transparent" fill-opacity="0.25" stroke-opacity="0.25"/>
|
||||
</g>
|
||||
</g>
|
||||
<g fill="none" marker-start="false" marker-end="false">
|
||||
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
|
||||
<g>
|
||||
<path fill="none" d="M 257.5012960011384,254.09529854714825 L 229.20451454573657,268.7305223757033" stroke-width="1" stroke="rgba(153,173,209,1)" fill-opacity="0.25" stroke-opacity="0.25"/>
|
||||
<path fill="none" d="M 10,0 L 10,0" stroke-width="3" stroke="transparent" fill-opacity="0.25" stroke-opacity="0.25"/>
|
||||
</g>
|
||||
</g>
|
||||
<g fill="none" marker-start="false" marker-end="false">
|
||||
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
|
||||
<g>
|
||||
<path fill="none" d="M 257.5477433396219,244.8186432623987 L 238.087235908425,234.50528557060912" stroke-width="1" stroke="rgba(153,173,209,1)" fill-opacity="0.25" stroke-opacity="0.25"/>
|
||||
<path fill="none" d="M 10,0 L 10,0" stroke-width="3" stroke="transparent" fill-opacity="0.25" stroke-opacity="0.25"/>
|
||||
</g>
|
||||
</g>
|
||||
<g fill="none" marker-start="false" marker-end="false">
|
||||
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
|
||||
<g>
|
||||
<path fill="none" d="M 261.1607330415961,240.97363154743587 L 240.3647186185602,207.01873905803288" stroke-width="1" stroke="rgba(153,173,209,1)" fill-opacity="0.25" stroke-opacity="0.25"/>
|
||||
<path fill="none" d="M 10,0 L 10,0" stroke-width="3" stroke="transparent" fill-opacity="0.25" stroke-opacity="0.25"/>
|
||||
</g>
|
||||
</g>
|
||||
<g fill="none" marker-start="false" marker-end="false">
|
||||
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
|
||||
<g>
|
||||
<path fill="none" d="M 244.79510139621294,280.97389009480145 L 229.8668248733183,276.3078176688704" stroke-width="1" stroke="rgba(153,173,209,1)" fill-opacity="0.25" stroke-opacity="0.25"/>
|
||||
<path fill="none" d="M 10,0 L 10,0" stroke-width="3" stroke="transparent" fill-opacity="0.25" stroke-opacity="0.25"/>
|
||||
</g>
|
||||
</g>
|
||||
<g fill="none" marker-start="false" marker-end="false">
|
||||
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
|
||||
<g>
|
||||
<path fill="none" d="M 245.59068057320954,279.1142524810412 L 190.5360131523764,248.63918074649789" stroke-width="1" stroke="rgba(153,173,209,1)" fill-opacity="0.25" stroke-opacity="0.25"/>
|
||||
<path fill="none" d="M 10,0 L 10,0" stroke-width="3" stroke="transparent" fill-opacity="0.25" stroke-opacity="0.25"/>
|
||||
</g>
|
||||
</g>
|
||||
<g fill="none" marker-start="false" marker-end="false">
|
||||
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
|
||||
<g>
|
||||
<path fill="none" d="M 263.5441901513499,287.86589190090194 L 281.26162649904074,295.38960126316056" stroke-width="1" stroke="rgba(153,173,209,1)" fill-opacity="0.25" stroke-opacity="0.25"/>
|
||||
<path fill="none" d="M 10,0 L 10,0" stroke-width="3" stroke="transparent" fill-opacity="0.25" stroke-opacity="0.25"/>
|
||||
</g>
|
||||
</g>
|
||||
<g fill="none" marker-start="false" marker-end="false">
|
||||
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
|
||||
<g>
|
||||
<path fill="none" d="M 314.60253706510684,227.12418473972238 L 334.54550370637753,231.9368961928948" stroke-width="1" stroke="rgba(153,173,209,1)" fill-opacity="0.25" stroke-opacity="0.25"/>
|
||||
<path fill="none" d="M 10,0 L 10,0" stroke-width="3" stroke="transparent" fill-opacity="0.25" stroke-opacity="0.25"/>
|
||||
</g>
|
||||
</g>
|
||||
<g fill="none" marker-start="false" marker-end="false">
|
||||
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
|
||||
<g>
|
||||
<path fill="none" d="M 239.11694687155637,247.86185062732287 L 224.691738431178,239.58387385998182" stroke-width="1" stroke="rgba(153,173,209,1)" fill-opacity="0.25" stroke-opacity="0.25"/>
|
||||
<path fill="none" d="M 10,0 L 10,0" stroke-width="3" stroke="transparent" fill-opacity="0.25" stroke-opacity="0.25"/>
|
||||
</g>
|
||||
</g>
|
||||
<g fill="none" marker-start="false" marker-end="false">
|
||||
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
|
||||
<g>
|
||||
<path fill="none" d="M 242.21038430377263,244.5406288622083 L 220.76977927044612,212.65408854501825" stroke-width="1" stroke="rgba(153,173,209,1)" fill-opacity="0.25" stroke-opacity="0.25"/>
|
||||
<path fill="none" d="M 10,0 L 10,0" stroke-width="3" stroke="transparent" fill-opacity="0.25" stroke-opacity="0.25"/>
|
||||
</g>
|
||||
</g>
|
||||
<g fill="none" marker-start="false" marker-end="false">
|
||||
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
|
||||
<g>
|
||||
<path fill="none" d="M 241.5174422343785,245.0512032382379 L 235.52422951855118,237.61049414945742" stroke-width="1" stroke="rgba(153,173,209,1)" fill-opacity="0.25" stroke-opacity="0.25"/>
|
||||
<path fill="none" d="M 10,0 L 10,0" stroke-width="3" stroke="transparent" fill-opacity="0.25" stroke-opacity="0.25"/>
|
||||
</g>
|
||||
</g>
|
||||
<g fill="none" marker-start="false" marker-end="false">
|
||||
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
|
||||
<g>
|
||||
<path fill="none" d="M 237.88285126563517,251.4817125373356 L 191.69441924217733,245.15360240407065" stroke-width="1" stroke="rgba(153,173,209,1)" fill-opacity="0.25" stroke-opacity="0.25"/>
|
||||
<path fill="none" d="M 10,0 L 10,0" stroke-width="3" stroke="transparent" fill-opacity="0.25" stroke-opacity="0.25"/>
|
||||
</g>
|
||||
</g>
|
||||
<g fill="none" marker-start="false" marker-end="false">
|
||||
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
|
||||
<g>
|
||||
<path fill="none" d="M 215.74460714233118,224.6103768866849 L 215.46364481079382,214.35187286917449" stroke-width="1" stroke="rgba(153,173,209,1)" fill-opacity="0.25" stroke-opacity="0.25"/>
|
||||
<path fill="none" d="M 10,0 L 10,0" stroke-width="3" stroke="transparent" fill-opacity="0.25" stroke-opacity="0.25"/>
|
||||
</g>
|
||||
</g>
|
||||
<g fill="none" marker-start="false" marker-end="false">
|
||||
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
|
||||
<g>
|
||||
<path fill="none" d="M 220.69792211727116,225.76909767706312 L 230.46231042667415,207.32857383172595" stroke-width="1" stroke="rgba(153,173,209,1)" fill-opacity="0.25" stroke-opacity="0.25"/>
|
||||
<path fill="none" d="M 10,0 L 10,0" stroke-width="3" stroke="transparent" fill-opacity="0.25" stroke-opacity="0.25"/>
|
||||
</g>
|
||||
</g>
|
||||
<g fill="none" marker-start="false" marker-end="false">
|
||||
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
|
||||
<g>
|
||||
<path fill="none" d="M 205.5693942232922,201.62678644481576 L 184.34395111362187,195.6062152641686" stroke-width="1" stroke="rgba(153,173,209,1)" fill-opacity="0.25" stroke-opacity="0.25"/>
|
||||
<path fill="none" d="M 10,0 L 10,0" stroke-width="3" stroke="transparent" fill-opacity="0.25" stroke-opacity="0.25"/>
|
||||
</g>
|
||||
</g>
|
||||
<g fill="none" marker-start="false" marker-end="false">
|
||||
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
|
||||
<g>
|
||||
<path fill="none" d="M 184.68059340366415,193.80252746182785 L 225.18473252407023,197.5658960000862" stroke-width="1" stroke="rgba(153,173,209,1)" fill-opacity="0.25" stroke-opacity="0.25"/>
|
||||
<path fill="none" d="M 10,0 L 10,0" stroke-width="3" stroke="transparent" fill-opacity="0.25" stroke-opacity="0.25"/>
|
||||
</g>
|
||||
</g>
|
||||
<g fill="none" marker-start="false" marker-end="false">
|
||||
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
|
||||
<g>
|
||||
<path fill="none" d="M 166.32270726240625,198.302047516414 L 134.27494898759375,218.99638388007037" stroke-width="1" stroke="rgba(153,173,209,1)" fill-opacity="0.25" stroke-opacity="0.25"/>
|
||||
<path fill="none" d="M 10,0 L 10,0" stroke-width="3" stroke="transparent" fill-opacity="0.25" stroke-opacity="0.25"/>
|
||||
</g>
|
||||
</g>
|
||||
<g fill="none" marker-start="false" marker-end="false">
|
||||
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
|
||||
<g>
|
||||
<path fill="none" d="M 176.09752853733272,202.7825301041519 L 180.4129237331751,233.89106913901216" stroke-width="1" stroke="rgba(153,173,209,1)" fill-opacity="0.25" stroke-opacity="0.25"/>
|
||||
<path fill="none" d="M 10,0 L 10,0" stroke-width="3" stroke="transparent" fill-opacity="0.25" stroke-opacity="0.25"/>
|
||||
</g>
|
||||
</g>
|
||||
<g fill="none" marker-start="false" marker-end="false">
|
||||
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
|
||||
<g>
|
||||
<path fill="none" d="M 164.73500462955448,192.3974269494027 L 134.3364751678088,190.9367557898551" stroke-width="1" stroke="rgba(153,173,209,1)" fill-opacity="0.25" stroke-opacity="0.25"/>
|
||||
<path fill="none" d="M 10,0 L 10,0" stroke-width="3" stroke="transparent" fill-opacity="0.25" stroke-opacity="0.25"/>
|
||||
</g>
|
||||
</g>
|
||||
<g fill="none" marker-start="false" marker-end="false">
|
||||
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
|
||||
<g>
|
||||
<path fill="none" d="M 233.29417128700513,208.31886580249028 L 231.0990477071355,219.9947786066894" stroke-width="1" stroke="rgba(153,173,209,1)" fill-opacity="0.25" stroke-opacity="0.25"/>
|
||||
<path fill="none" d="M 10,0 L 10,0" stroke-width="3" stroke="transparent" fill-opacity="0.25" stroke-opacity="0.25"/>
|
||||
</g>
|
||||
</g>
|
||||
<g fill="none" marker-start="false" marker-end="false">
|
||||
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
|
||||
<g>
|
||||
<path fill="none" d="M 219.65845717265282,232.64677559521536 L 191.37988816426125,240.97204459521433" stroke-width="1" stroke="rgba(153,173,209,1)" fill-opacity="0.25" stroke-opacity="0.25"/>
|
||||
<path fill="none" d="M 10,0 L 10,0" stroke-width="3" stroke="transparent" fill-opacity="0.25" stroke-opacity="0.25"/>
|
||||
</g>
|
||||
</g>
|
||||
<g fill="none" marker-start="false" marker-end="false">
|
||||
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
|
||||
<g>
|
||||
<path fill="none" d="M 189.72456746177508,249.8785357837294 L 212.3846091739671,267.242176496544" stroke-width="1" stroke="rgba(153,173,209,1)" fill-opacity="0.25" stroke-opacity="0.25"/>
|
||||
<path fill="none" d="M 10,0 L 10,0" stroke-width="3" stroke="transparent" fill-opacity="0.25" stroke-opacity="0.25"/>
|
||||
</g>
|
||||
</g>
|
||||
<g fill="none" marker-start="false" marker-end="false">
|
||||
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
|
||||
<g>
|
||||
<path fill="none" d="M 174.98699364849082,251.12836001874703 L 163.3473874550248,263.67887569902643" stroke-width="1" stroke="rgba(153,173,209,1)" fill-opacity="0.25" stroke-opacity="0.25"/>
|
||||
<path fill="none" d="M 10,0 L 10,0" stroke-width="3" stroke="transparent" fill-opacity="0.25" stroke-opacity="0.25"/>
|
||||
</g>
|
||||
</g>
|
||||
<g fill="none" marker-start="false" marker-end="false">
|
||||
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
|
||||
<g>
|
||||
<path fill="none" d="M 179.10772502967555,253.43061742237228 L 174.49374591759008,270.0221871430574" stroke-width="1" stroke="rgba(153,173,209,1)" fill-opacity="0.25" stroke-opacity="0.25"/>
|
||||
<path fill="none" d="M 10,0 L 10,0" stroke-width="3" stroke="transparent" fill-opacity="0.25" stroke-opacity="0.25"/>
|
||||
</g>
|
||||
</g>
|
||||
<g fill="none" marker-start="false" marker-end="false">
|
||||
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
|
||||
<g>
|
||||
<path fill="none" d="M 174.45924245950096,236.99148676061765 L 131.6757291591514,197.26153447961673" stroke-width="1" stroke="rgba(153,173,209,1)" fill-opacity="0.25" stroke-opacity="0.25"/>
|
||||
<path fill="none" d="M 10,0 L 10,0" stroke-width="3" stroke="transparent" fill-opacity="0.25" stroke-opacity="0.25"/>
|
||||
</g>
|
||||
</g>
|
||||
<g fill="none" marker-start="false" marker-end="false">
|
||||
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
|
||||
<g>
|
||||
<path fill="none" d="M 172.28858536098755,240.6688157346562 L 148.31441146518432,232.77516925069537" stroke-width="1" stroke="rgba(153,173,209,1)" fill-opacity="0.25" stroke-opacity="0.25"/>
|
||||
<path fill="none" d="M 10,0 L 10,0" stroke-width="3" stroke="transparent" fill-opacity="0.25" stroke-opacity="0.25"/>
|
||||
</g>
|
||||
</g>
|
||||
<g fill="none" marker-start="false" marker-end="false">
|
||||
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
|
||||
<g>
|
||||
<path fill="none" d="M 173.74719757320935,237.84962098518602 L 155.30501800296253,224.20891172965773" stroke-width="1" stroke="rgba(153,173,209,1)" fill-opacity="0.25" stroke-opacity="0.25"/>
|
||||
<path fill="none" d="M 10,0 L 10,0" stroke-width="3" stroke="transparent" fill-opacity="0.25" stroke-opacity="0.25"/>
|
||||
</g>
|
||||
</g>
|
||||
<g fill="none" marker-start="false" marker-end="false">
|
||||
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
|
||||
<g>
|
||||
<path fill="none" d="M 176.1972416219292,235.50436058894988 L 162.45409504799267,215.11764868839387" stroke-width="1" stroke="rgba(153,173,209,1)" fill-opacity="0.25" stroke-opacity="0.25"/>
|
||||
<path fill="none" d="M 10,0 L 10,0" stroke-width="3" stroke="transparent" fill-opacity="0.25" stroke-opacity="0.25"/>
|
||||
</g>
|
||||
</g>
|
||||
<g fill="none" marker-start="false" marker-end="false">
|
||||
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
|
||||
<g>
|
||||
<path fill="none" d="M 172.26998674102566,246.86655935918824 L 147.29922712616184,254.92254891717894" stroke-width="1" stroke="rgba(153,173,209,1)" fill-opacity="0.25" stroke-opacity="0.25"/>
|
||||
<path fill="none" d="M 10,0 L 10,0" stroke-width="3" stroke="transparent" fill-opacity="0.25" stroke-opacity="0.25"/>
|
||||
</g>
|
||||
</g>
|
||||
<g fill="none" marker-start="false" marker-end="false">
|
||||
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
|
||||
<g>
|
||||
<path fill="none" d="M 172.33819515970592,240.52198379270385 L 135.32295291158314,227.6952861047571" stroke-width="1" stroke="rgba(153,173,209,1)" fill-opacity="0.25" stroke-opacity="0.25"/>
|
||||
<path fill="none" d="M 10,0 L 10,0" stroke-width="3" stroke="transparent" fill-opacity="0.25" stroke-opacity="0.25"/>
|
||||
</g>
|
||||
</g>
|
||||
<g fill="none" marker-start="false" marker-end="false">
|
||||
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
|
||||
<g>
|
||||
<path fill="none" d="M 127.8112170337342,199.83796033602502 L 135.35280731929316,220.2666081454203" stroke-width="1" stroke="rgba(153,173,209,1)" fill-opacity="0.25" stroke-opacity="0.25"/>
|
||||
<path fill="none" d="M 10,0 L 10,0" stroke-width="3" stroke="transparent" fill-opacity="0.25" stroke-opacity="0.25"/>
|
||||
</g>
|
||||
</g>
|
||||
<g fill="none" marker-start="false" marker-end="false">
|
||||
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
|
||||
<g>
|
||||
<path fill="none" d="M 119.90015157317256,181.5004276455087 L 112.44906107331181,166.49659689062412" stroke-width="1" stroke="rgba(153,173,209,1)" fill-opacity="0.25" stroke-opacity="0.25"/>
|
||||
<path fill="none" d="M 10,0 L 10,0" stroke-width="3" stroke="transparent" fill-opacity="0.25" stroke-opacity="0.25"/>
|
||||
</g>
|
||||
</g>
|
||||
<g fill="none" marker-start="false" marker-end="false">
|
||||
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
|
||||
<g>
|
||||
<path fill="none" d="M 115.40200328803994,185.98811682609647 L 100.13788318656944,178.3634151563254" stroke-width="1" stroke="rgba(153,173,209,1)" fill-opacity="0.25" stroke-opacity="0.25"/>
|
||||
<path fill="none" d="M 10,0 L 10,0" stroke-width="3" stroke="transparent" fill-opacity="0.25" stroke-opacity="0.25"/>
|
||||
</g>
|
||||
</g>
|
||||
<g fill="none" marker-start="false" marker-end="false">
|
||||
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
|
||||
<g>
|
||||
<path fill="none" d="M 130.70814543258126,198.17357271862292 L 140.90509767044608,210.54554349231458" stroke-width="1" stroke="rgba(153,173,209,1)" fill-opacity="0.25" stroke-opacity="0.25"/>
|
||||
<path fill="none" d="M 10,0 L 10,0" stroke-width="3" stroke="transparent" fill-opacity="0.25" stroke-opacity="0.25"/>
|
||||
</g>
|
||||
</g>
|
||||
<g fill="none" marker-start="false" marker-end="false">
|
||||
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
|
||||
<g>
|
||||
<path fill="none" d="M 133.28006327515453,194.95327187392715 L 147.9323009216228,202.32932089951035" stroke-width="1" stroke="rgba(153,173,209,1)" fill-opacity="0.25" stroke-opacity="0.25"/>
|
||||
<path fill="none" d="M 10,0 L 10,0" stroke-width="3" stroke="transparent" fill-opacity="0.25" stroke-opacity="0.25"/>
|
||||
</g>
|
||||
</g>
|
||||
<g fill="none" marker-start="false" marker-end="false">
|
||||
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
|
||||
<g>
|
||||
<path fill="none" d="M 124.79689453251751,200.44672195318068 L 125.42528106562702,214.431131440374" stroke-width="1" stroke="rgba(153,173,209,1)" fill-opacity="0.25" stroke-opacity="0.25"/>
|
||||
<path fill="none" d="M 10,0 L 10,0" stroke-width="3" stroke="transparent" fill-opacity="0.25" stroke-opacity="0.25"/>
|
||||
</g>
|
||||
</g>
|
||||
<g fill="none" marker-start="false" marker-end="false">
|
||||
<g fill="none" marker-start="false" marker-end="false" stroke="transparent" stroke-width="3"/>
|
||||
<g>
|
||||
<path fill="none" d="M 134.43927090141014,248.5682119334842 L 129.21714694526955,233.8457284962033" stroke-width="1" stroke="rgba(153,173,209,1)" fill-opacity="0.25" stroke-opacity="0.25"/>
|
||||
<path fill="none" d="M 10,0 L 10,0" stroke-width="3" stroke="transparent" fill-opacity="0.25" stroke-opacity="0.25"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<g fill="none">
|
||||
<g fill="none" x="330.209605228419" y="280.2450627294096" transform="matrix(1,0,0,1,330.209595,280.245056)">
|
||||
<g>
|
||||
<circle fill="none" stroke-width="12" stroke="rgba(23,131,255,1)" stroke-opacity="0.25" r="10" stroke-dasharray="0,0" pointer-events="none"/>
|
||||
</g>
|
||||
<g>
|
||||
<circle fill="rgba(23,131,255,1)" stroke-width="3" stroke="rgba(0,0,0,1)" r="10"/>
|
||||
</g>
|
||||
</g>
|
||||
<g fill="none" x="339.09477962307636" y="315.5439433427595" transform="matrix(1,0,0,1,339.094788,315.543945)">
|
||||
<g>
|
||||
<circle fill="none" stroke-width="12" stroke="rgba(23,131,255,1)" stroke-opacity="0.25" r="10" stroke-dasharray="0,0" pointer-events="none"/>
|
||||
</g>
|
||||
<g>
|
||||
<circle fill="rgba(23,131,255,1)" stroke-width="0" stroke="rgba(0,0,0,1)" r="10"/>
|
||||
</g>
|
||||
</g>
|
||||
<g fill="none" x="370.96843627903814" y="288.8516669183745" transform="matrix(1,0,0,1,370.968445,288.851654)">
|
||||
<g>
|
||||
<circle fill="none" stroke-width="12" stroke="rgba(23,131,255,1)" stroke-opacity="0.25" r="10" stroke-dasharray="0,0" pointer-events="none"/>
|
||||
</g>
|
||||
<g>
|
||||
<circle fill="rgba(23,131,255,1)" stroke-width="0" stroke="rgba(0,0,0,1)" r="10"/>
|
||||
</g>
|
||||
</g>
|
||||
<g fill="none" x="362.90626949018645" y="318.57382808705063" transform="matrix(1,0,0,1,362.906281,318.573822)">
|
||||
<g>
|
||||
<circle fill="none" stroke-width="12" stroke="rgba(23,131,255,1)" stroke-opacity="0.25" r="10" stroke-dasharray="0,0" pointer-events="none"/>
|
||||
</g>
|
||||
<g>
|
||||
<circle fill="rgba(23,131,255,1)" stroke-width="0" stroke="rgba(0,0,0,1)" r="10"/>
|
||||
</g>
|
||||
</g>
|
||||
<g fill="none" x="390.8333705666316" y="261.38180952561333" transform="matrix(1,0,0,1,390.833374,261.381805)">
|
||||
<g>
|
||||
<circle fill="none" stroke-width="12" stroke="rgba(23,131,255,1)" stroke-opacity="0.25" r="10" stroke-dasharray="0,0" pointer-events="none"/>
|
||||
</g>
|
||||
<g>
|
||||
<circle fill="rgba(23,131,255,1)" stroke-width="0" stroke="rgba(0,0,0,1)" r="10"/>
|
||||
</g>
|
||||
</g>
|
||||
<g fill="none" x="394.1903393745575" y="288.74508614019544" transform="matrix(1,0,0,1,394.190338,288.745087)">
|
||||
<g>
|
||||
<circle fill="none" stroke-width="12" stroke="rgba(23,131,255,1)" stroke-opacity="0.25" r="10" stroke-dasharray="0,0" pointer-events="none"/>
|
||||
</g>
|
||||
<g>
|
||||
<circle fill="rgba(23,131,255,1)" stroke-width="0" stroke="rgba(0,0,0,1)" r="10"/>
|
||||
</g>
|
||||
</g>
|
||||
<g fill="none" x="431.7014789453777" y="272.0720153946496" transform="matrix(1,0,0,1,431.701477,272.072021)">
|
||||
<g>
|
||||
<circle fill="rgba(23,131,255,1)" stroke-width="0" stroke="rgba(0,0,0,1)" r="10" fill-opacity="0.25" stroke-opacity="0.25"/>
|
||||
</g>
|
||||
</g>
|
||||
<g fill="none" x="364.47843549149144" y="257.28142373450123" transform="matrix(1,0,0,1,364.478424,257.281433)">
|
||||
<g>
|
||||
<circle fill="none" stroke-width="12" stroke="rgba(23,131,255,1)" stroke-opacity="0.25" r="10" stroke-dasharray="0,0" pointer-events="none"/>
|
||||
</g>
|
||||
<g>
|
||||
<circle fill="rgba(23,131,255,1)" stroke-width="0" stroke="rgba(0,0,0,1)" r="10"/>
|
||||
</g>
|
||||
</g>
|
||||
<g fill="none" x="318.3482125134808" y="321.42923476402336" transform="matrix(1,0,0,1,318.348206,321.429230)">
|
||||
<g>
|
||||
<circle fill="none" stroke-width="12" stroke="rgba(23,131,255,1)" stroke-opacity="0.25" r="10" stroke-dasharray="0,0" pointer-events="none"/>
|
||||
</g>
|
||||
<g>
|
||||
<circle fill="rgba(23,131,255,1)" stroke-width="0" stroke="rgba(0,0,0,1)" r="10"/>
|
||||
</g>
|
||||
</g>
|
||||
<g fill="none" x="302.2954406091757" y="260.87239236590455" transform="matrix(1,0,0,1,302.295441,260.872406)">
|
||||
<g>
|
||||
<circle fill="none" stroke-width="12" stroke="rgba(23,131,255,1)" stroke-opacity="0.25" r="10" stroke-dasharray="0,0" pointer-events="none"/>
|
||||
</g>
|
||||
<g>
|
||||
<circle fill="rgba(23,131,255,1)" stroke-width="0" stroke="rgba(0,0,0,1)" r="10"/>
|
||||
</g>
|
||||
</g>
|
||||
<g fill="none" x="266.38361733300684" y="249.50133290102752" transform="matrix(1,0,0,1,266.383606,249.501328)">
|
||||
<g>
|
||||
<circle fill="none" stroke-width="12" stroke="rgba(23,131,255,1)" stroke-opacity="0.25" r="10" stroke-dasharray="0,0" pointer-events="none"/>
|
||||
</g>
|
||||
<g>
|
||||
<circle fill="rgba(23,131,255,1)" stroke-width="0" stroke="rgba(0,0,0,1)" r="10"/>
|
||||
</g>
|
||||
</g>
|
||||
<g fill="none" x="254.3397272252356" y="283.9572085882244" transform="matrix(1,0,0,1,254.339722,283.957214)">
|
||||
<g>
|
||||
<circle fill="none" stroke-width="12" stroke="rgba(23,131,255,1)" stroke-opacity="0.25" r="10" stroke-dasharray="0,0" pointer-events="none"/>
|
||||
</g>
|
||||
<g>
|
||||
<circle fill="rgba(23,131,255,1)" stroke-width="0" stroke="rgba(0,0,0,1)" r="10"/>
|
||||
</g>
|
||||
</g>
|
||||
<g fill="none" x="304.8815771188896" y="224.7782921581964" transform="matrix(1,0,0,1,304.881592,224.778290)">
|
||||
<g>
|
||||
<circle fill="rgba(23,131,255,1)" stroke-width="0" stroke="rgba(0,0,0,1)" r="10" fill-opacity="0.25" stroke-opacity="0.25"/>
|
||||
</g>
|
||||
</g>
|
||||
<g fill="none" x="344.26645305476836" y="234.28278436399253" transform="matrix(1,0,0,1,344.266449,234.282791)">
|
||||
<g>
|
||||
<circle fill="none" stroke-width="12" stroke="rgba(23,131,255,1)" stroke-opacity="0.25" r="10" stroke-dasharray="0,0" pointer-events="none"/>
|
||||
</g>
|
||||
<g>
|
||||
<circle fill="rgba(23,131,255,1)" stroke-width="0" stroke="rgba(0,0,0,1)" r="10"/>
|
||||
</g>
|
||||
</g>
|
||||
<g fill="none" x="290.4660994057329" y="299.29828902264836" transform="matrix(1,0,0,1,290.466095,299.298279)">
|
||||
<g>
|
||||
<circle fill="none" stroke-width="12" stroke="rgba(23,131,255,1)" stroke-opacity="0.25" r="10" stroke-dasharray="0,0" pointer-events="none"/>
|
||||
</g>
|
||||
<g>
|
||||
<circle fill="rgba(23,131,255,1)" stroke-width="0" stroke="rgba(0,0,0,1)" r="10"/>
|
||||
</g>
|
||||
</g>
|
||||
<g fill="none" x="355.90035417740864" y="303.3452130308936" transform="matrix(1,0,0,1,355.900360,303.345215)">
|
||||
<g>
|
||||
<circle fill="none" stroke-width="12" stroke="rgba(23,131,255,1)" stroke-opacity="0.25" r="10" stroke-dasharray="0,0" pointer-events="none"/>
|
||||
</g>
|
||||
<g>
|
||||
<circle fill="rgba(23,131,255,1)" stroke-width="0" stroke="rgba(0,0,0,1)" r="10"/>
|
||||
</g>
|
||||
</g>
|
||||
<g fill="none" x="247.79029302376827" y="252.83909345220087" transform="matrix(1,0,0,1,247.790298,252.839096)">
|
||||
<g>
|
||||
<circle fill="none" stroke-width="12" stroke="rgba(23,131,255,1)" stroke-opacity="0.25" r="10" stroke-dasharray="0,0" pointer-events="none"/>
|
||||
</g>
|
||||
<g>
|
||||
<circle fill="rgba(23,131,255,1)" stroke-width="0" stroke="rgba(0,0,0,1)" r="10"/>
|
||||
</g>
|
||||
</g>
|
||||
<g fill="none" x="216.01838263636145" y="234.6066297482171" transform="matrix(1,0,0,1,216.018387,234.606628)">
|
||||
<g>
|
||||
<circle fill="rgba(23,131,255,1)" stroke-width="0" stroke="rgba(0,0,0,1)" r="10" fill-opacity="0.25" stroke-opacity="0.25"/>
|
||||
</g>
|
||||
</g>
|
||||
<g fill="none" x="215.18986028427523" y="204.35562724199048" transform="matrix(1,0,0,1,215.189865,204.355621)">
|
||||
<g>
|
||||
<circle fill="rgba(23,131,255,1)" stroke-width="0" stroke="rgba(0,0,0,1)" r="10" fill-opacity="0.25" stroke-opacity="0.25"/>
|
||||
</g>
|
||||
</g>
|
||||
<g fill="none" x="174.72348571507533" y="192.877381921129" transform="matrix(1,0,0,1,174.723480,192.877380)">
|
||||
<g>
|
||||
<circle fill="rgba(23,131,255,1)" stroke-width="0" stroke="rgba(0,0,0,1)" r="10" fill-opacity="0.25" stroke-opacity="0.25"/>
|
||||
</g>
|
||||
</g>
|
||||
<g fill="none" x="235.14184203487181" y="198.49104370483496" transform="matrix(1,0,0,1,235.141846,198.491043)">
|
||||
<g>
|
||||
<circle fill="rgba(23,131,255,1)" stroke-width="0" stroke="rgba(0,0,0,1)" r="10" fill-opacity="0.25" stroke-opacity="0.25"/>
|
||||
</g>
|
||||
</g>
|
||||
<g fill="none" x="229.25137868408746" y="229.82259369692397" transform="matrix(1,0,0,1,229.251373,229.822601)">
|
||||
<g>
|
||||
<circle fill="rgba(23,131,255,1)" stroke-width="0" stroke="rgba(0,0,0,1)" r="10" fill-opacity="0.25" stroke-opacity="0.25"/>
|
||||
</g>
|
||||
</g>
|
||||
<g fill="none" x="181.78697020120458" y="243.79622267465135" transform="matrix(1,0,0,1,181.786972,243.796219)">
|
||||
<g>
|
||||
<circle fill="rgba(23,131,255,1)" stroke-width="0" stroke="rgba(0,0,0,1)" r="10" fill-opacity="0.25" stroke-opacity="0.25"/>
|
||||
</g>
|
||||
</g>
|
||||
<g fill="none" x="124.34799591236852" y="190.45680543292272" transform="matrix(1,0,0,1,124.348000,190.456802)">
|
||||
<g>
|
||||
<circle fill="rgba(23,131,255,1)" stroke-width="0" stroke="rgba(0,0,0,1)" r="10" fill-opacity="0.25" stroke-opacity="0.25"/>
|
||||
</g>
|
||||
</g>
|
||||
<g fill="none" x="220.32219861151185" y="273.32448746177096" transform="matrix(1,0,0,1,220.322205,273.324493)">
|
||||
<g>
|
||||
<circle fill="rgba(23,131,255,1)" stroke-width="0" stroke="rgba(0,0,0,1)" r="10" fill-opacity="0.25" stroke-opacity="0.25"/>
|
||||
</g>
|
||||
</g>
|
||||
<g fill="none" x="156.54741544348207" y="271.0110103195917" transform="matrix(1,0,0,1,156.547409,271.011017)">
|
||||
<g>
|
||||
<circle fill="rgba(23,131,255,1)" stroke-width="0" stroke="rgba(0,0,0,1)" r="10" fill-opacity="0.25" stroke-opacity="0.25"/>
|
||||
</g>
|
||||
</g>
|
||||
<g fill="none" x="171.81450117618255" y="279.65659296793626" transform="matrix(1,0,0,1,171.814499,279.656586)">
|
||||
<g>
|
||||
<circle fill="rgba(23,131,255,1)" stroke-width="0" stroke="rgba(0,0,0,1)" r="10" fill-opacity="0.25" stroke-opacity="0.25"/>
|
||||
</g>
|
||||
</g>
|
||||
<g fill="none" x="108.00121334441076" y="157.54021827065668" transform="matrix(1,0,0,1,108.001213,157.540222)">
|
||||
<g>
|
||||
<circle fill="rgba(23,131,255,1)" stroke-width="0" stroke="rgba(0,0,0,1)" r="10" fill-opacity="0.25" stroke-opacity="0.25"/>
|
||||
</g>
|
||||
</g>
|
||||
<g fill="none" x="138.81602069382026" y="229.6477593502967" transform="matrix(1,0,0,1,138.816025,229.647766)">
|
||||
<g>
|
||||
<circle fill="rgba(23,131,255,1)" stroke-width="0" stroke="rgba(0,0,0,1)" r="10" fill-opacity="0.25" stroke-opacity="0.25"/>
|
||||
</g>
|
||||
</g>
|
||||
<g fill="none" x="91.19188511998078" y="173.89473434893958" transform="matrix(1,0,0,1,91.191887,173.894730)">
|
||||
<g>
|
||||
<circle fill="rgba(23,131,255,1)" stroke-width="0" stroke="rgba(0,0,0,1)" r="10" fill-opacity="0.25" stroke-opacity="0.25"/>
|
||||
</g>
|
||||
</g>
|
||||
<g fill="none" x="147.26524757451654" y="218.26231617624563" transform="matrix(1,0,0,1,147.265244,218.262314)">
|
||||
<g>
|
||||
<circle fill="rgba(23,131,255,1)" stroke-width="0" stroke="rgba(0,0,0,1)" r="10" fill-opacity="0.25" stroke-opacity="0.25"/>
|
||||
</g>
|
||||
</g>
|
||||
<g fill="none" x="156.8643721130784" y="206.82579697954296" transform="matrix(1,0,0,1,156.864365,206.825790)">
|
||||
<g>
|
||||
<circle fill="rgba(23,131,255,1)" stroke-width="0" stroke="rgba(0,0,0,1)" r="10" fill-opacity="0.25" stroke-opacity="0.25"/>
|
||||
</g>
|
||||
</g>
|
||||
<g fill="none" x="137.78223987448965" y="257.9928890298493" transform="matrix(1,0,0,1,137.782242,257.992889)">
|
||||
<g>
|
||||
<circle fill="rgba(23,131,255,1)" stroke-width="0" stroke="rgba(0,0,0,1)" r="10" fill-opacity="0.25" stroke-opacity="0.25"/>
|
||||
</g>
|
||||
</g>
|
||||
<g fill="none" x="125.87417362786235" y="224.42104880515834" transform="matrix(1,0,0,1,125.874176,224.421051)">
|
||||
<g>
|
||||
<circle fill="rgba(23,131,255,1)" stroke-width="0" stroke="rgba(0,0,0,1)" r="10" fill-opacity="0.25" stroke-opacity="0.25"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
After Width: | Height: | Size: 50 KiB |
@ -31,8 +31,32 @@ describe('behavior click element', () => {
|
||||
graph.emit(`node:${CommonEvent.CLICK}`, { target: { id: '0' }, targetType: 'node' });
|
||||
});
|
||||
|
||||
it('selectedState and neighborSelectedState', async () => {
|
||||
graph.setBehaviors([
|
||||
{
|
||||
type: 'click-element',
|
||||
selectedState: 'selected',
|
||||
neighborSelectedState: 'active',
|
||||
unselectedState: 'inactive',
|
||||
degree: 1,
|
||||
},
|
||||
]);
|
||||
|
||||
graph.emit(`node:${CommonEvent.CLICK}`, { target: { id: '0' }, targetType: 'node' });
|
||||
await expect(graph).toMatchSnapshot(__filename, 'custom-neighborSelectedState');
|
||||
graph.emit(`node:${CommonEvent.CLICK}`, { target: { id: '0' }, targetType: 'node' });
|
||||
});
|
||||
|
||||
it('1 degree', async () => {
|
||||
graph.setBehaviors([{ type: 'click-element', degree: 1, selectedState: 'selected', unselectedState: undefined }]);
|
||||
graph.setBehaviors([
|
||||
{
|
||||
type: 'click-element',
|
||||
degree: 1,
|
||||
selectedState: 'selected',
|
||||
neighborSelectedState: 'selected',
|
||||
unselectedState: undefined,
|
||||
},
|
||||
]);
|
||||
|
||||
graph.emit(`node:${CommonEvent.CLICK}`, { target: { id: '0' }, targetType: 'node' });
|
||||
await expect(graph).toMatchSnapshot(__filename, 'node-1-degree');
|
||||
|
@ -53,16 +53,23 @@ export interface ClickElementOptions extends BaseBehaviorOptions {
|
||||
*/
|
||||
trigger?: ShortcutKey;
|
||||
/**
|
||||
* <zh/> 选中时应用的状态
|
||||
* <zh/> 当元素被选中时应用的状态
|
||||
*
|
||||
* <en/> The state to be applied when select.
|
||||
* <en/> The state to be applied when an element is selected
|
||||
* @defaultValue 'selected'
|
||||
*/
|
||||
selectedState?: State;
|
||||
/**
|
||||
* <zh/> 当有元素被选中时,其他未选中的元素应用的状态
|
||||
* <zh/> 当有元素选中时,其相邻 n 度关系的元素应用的状态。n 的值由属性 degree 控制,例如 degree 为 1 时表示直接相邻的元素
|
||||
*
|
||||
* <en/> The state to be applied on other unselected elements when some elements are selected
|
||||
* <en/> The state to be applied to the neighboring elements within n degrees when an element is selected. The value of n is controlled by the degree property, for instance, a degree of 1 indicates direct neighbors
|
||||
* @defaultValue 'selected'
|
||||
*/
|
||||
neighborSelectedState?: State;
|
||||
/**
|
||||
* <zh/> 当有元素被选中时,除了选中元素及其受影响的邻居元素外,其他所有元素应用的状态。
|
||||
*
|
||||
* <en/> The state to be applied to all unselected elements when some elements are selected, excluding the selected element and its affected neighbors
|
||||
* @defaultValue undefined
|
||||
*/
|
||||
unselectedState?: State;
|
||||
@ -80,7 +87,14 @@ export interface ClickElementOptions extends BaseBehaviorOptions {
|
||||
*
|
||||
* <en/> For edges, `0 `means only the current edge is selected,`1` means the current edge and its directly adjacent nodes are selected, etc.
|
||||
*/
|
||||
degree?: number;
|
||||
degree?: number | ((event: IPointerEvent) => number);
|
||||
/**
|
||||
* <zh/> 点击元素时的回调
|
||||
*
|
||||
* <en/> Callback when the element is clicked
|
||||
* @param event - <zh/> 点击事件 | <en/> click event
|
||||
*/
|
||||
onClick?: (event: IPointerEvent) => void;
|
||||
}
|
||||
|
||||
/**
|
||||
@ -93,7 +107,9 @@ export interface ClickElementOptions extends BaseBehaviorOptions {
|
||||
* <en/> When the mouse clicks on an element, you can activate the state of the element, such as selecting nodes or edges. When the degree is 1, clicking on a node will highlight the current node and its directly adjacent nodes and edges.
|
||||
*/
|
||||
export class ClickElement extends BaseBehavior<ClickElementOptions> {
|
||||
private selectedElementIds: ID[] = [];
|
||||
private selectedElementIds: Set<ID> = new Set<ID>();
|
||||
|
||||
private neighborSelectedElementIds: Set<ID> = new Set<ID>();
|
||||
|
||||
private shortcut: Shortcut;
|
||||
|
||||
@ -103,6 +119,7 @@ export class ClickElement extends BaseBehavior<ClickElementOptions> {
|
||||
multiple: false,
|
||||
trigger: ['shift'],
|
||||
selectedState: 'selected',
|
||||
neighborSelectedState: 'selected',
|
||||
unselectedState: undefined,
|
||||
degree: 0,
|
||||
};
|
||||
@ -126,50 +143,77 @@ export class ClickElement extends BaseBehavior<ClickElementOptions> {
|
||||
if (!this.validate(event)) return;
|
||||
this.updateElementsState(event, false);
|
||||
this.updateElementsState(event, true);
|
||||
this.options.onClick?.(event);
|
||||
};
|
||||
|
||||
private onClickCanvas = (event: IPointerEvent) => {
|
||||
if (!this.validate(event)) return;
|
||||
this.updateElementsState(event, false);
|
||||
this.selectedElementIds = [];
|
||||
this.selectedElementIds.clear();
|
||||
this.neighborSelectedElementIds.clear();
|
||||
this.options.onClick?.(event);
|
||||
};
|
||||
|
||||
private updateElementsState = (event: IPointerEvent, add: boolean) => {
|
||||
if (!this.options.selectedState && !this.options.unselectedState) return;
|
||||
|
||||
const { graph } = this.context;
|
||||
const { targetType, target } = event as { targetType: ElementType; target: Element };
|
||||
const { target } = event as { target: Element };
|
||||
|
||||
if (add) {
|
||||
// 如果当前元素已经被选中,则取消选中 | If the current element is already selected, deselect it
|
||||
if (this.selectedElementIds.includes(target.id)) {
|
||||
this.selectedElementIds = this.selectedElementIds.filter((id) => id !== target.id);
|
||||
if (this.selectedElementIds.has(target.id)) {
|
||||
this.selectedElementIds.delete(target.id);
|
||||
} else {
|
||||
const selectedElementIds = getElementNthDegreeIds(graph, targetType, target.id, this.options.degree);
|
||||
const isMultiple = this.options.multiple && this.shortcut.match(this.options.trigger);
|
||||
if (!isMultiple) {
|
||||
this.selectedElementIds = selectedElementIds;
|
||||
} else {
|
||||
this.selectedElementIds.push(...selectedElementIds);
|
||||
}
|
||||
if (!isMultiple) this.selectedElementIds.clear();
|
||||
this.selectedElementIds.add(target.id);
|
||||
this.updateNeighborSelectedElementIds(event);
|
||||
}
|
||||
}
|
||||
if (!this.selectedElementIds.length) return;
|
||||
if (!this.selectedElementIds.size) return;
|
||||
|
||||
const states: Record<ID, State[]> = {};
|
||||
|
||||
if (this.options.selectedState) {
|
||||
Object.assign(states, this.getElementsState(this.selectedElementIds, this.options.selectedState, add));
|
||||
Object.assign(
|
||||
states,
|
||||
this.getElementsState(Array.from(this.selectedElementIds), this.options.selectedState, add),
|
||||
);
|
||||
}
|
||||
|
||||
if (this.options.neighborSelectedState && this.neighborSelectedElementIds.size > 0) {
|
||||
Object.assign(
|
||||
states,
|
||||
this.getElementsState(Array.from(this.neighborSelectedElementIds), this.options.neighborSelectedState, add),
|
||||
);
|
||||
}
|
||||
|
||||
if (this.options.unselectedState) {
|
||||
const inactiveIds = idsOf(graph.getData(), true).filter((id) => !this.selectedElementIds.includes(id));
|
||||
const inactiveIds = idsOf(graph.getData(), true).filter(
|
||||
(id) => !this.selectedElementIds.has(id) && !this.neighborSelectedElementIds.has(id),
|
||||
);
|
||||
Object.assign(states, this.getElementsState(inactiveIds, this.options.unselectedState, add));
|
||||
}
|
||||
|
||||
graph.setElementState(states, this.options.animation);
|
||||
};
|
||||
|
||||
private updateNeighborSelectedElementIds = (event: IPointerEvent) => {
|
||||
this.neighborSelectedElementIds.clear();
|
||||
|
||||
const degree = isFunction(this.options.degree) ? this.options.degree(event) : this.options.degree;
|
||||
if (degree) {
|
||||
const { targetType } = event as { targetType: ElementType };
|
||||
this.selectedElementIds.forEach((id) => {
|
||||
const neighborIds = getElementNthDegreeIds(this.context.graph, targetType, id, degree);
|
||||
this.neighborSelectedElementIds = new Set(
|
||||
[...this.neighborSelectedElementIds, ...neighborIds].filter((id) => !this.selectedElementIds.has(id)),
|
||||
);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
private getElementsState = (ids: ID[], state: State, add: boolean) => {
|
||||
const { graph } = this.context;
|
||||
const states: Record<ID, State[]> = {};
|
||||
|
Loading…
Reference in New Issue
Block a user