使用D3将文本/图像放在svg路径质心上

时间:2015-03-28 11:34:29

标签: javascript svg d3.js

我看了看,读了所有我可以吸的东西,但我仍然遇到这个质心的问题。这有点类似于我的另一个问题,但这更精确。

我需要将文字/图像放在这些区域的质心上: enter image description here

svg数据已经在我的html文件中,格式如下: enter image description here

所以我需要选择一个路径,并在d属性上使用质心函数,然后放置一个点/文本/图像等。

我已经附上了一个JSFiddle来查看所有地区,不介意这个类的ID。

<svg id="gamemap">
        <g>
            <path id='1613' class='Faction2' d='M541.02,336.29L541.71,336.09L543.77,338.27L543.53,338.58L545.92,338.99L546.76,340.12L548.44,340.06L548.55,341.76L549.62,342.38L549.24,343.35L550.58,344.54L551.35,344.98L553.38,344.66L554.17,345.63L555.37,345.08L556.2,346.28L556.8,345.6L557.82,347.73L558.51,347.76L558.17,350.15L560.8,350.12L561.12,349.61L563.89,349.94L562.98,351.84L562.99,353.94L562.06,353.97L560.77,357.72L561.33,357.73L562.06,359L563.49,358.5L563.75,357.85L564.17,358.09L564.64,361.19L565.52,361.68L564.51,362.21L564.67,363.38L565.17,363.21L565.35,364.41L566.19,364.53L566.23,365.29L569.63,364.91L570.56,365.3L571.08,364.96L570.95,363.35L571.8,363.24L572.34,361.72L574.42,361.71L574.42,362.52L575.54,363.71L576.52,363.63L577.12,366.98L576.92,367.48L576.48,367.11L576.07,368.69L575.27,369.28L574.63,368.34L573.95,368.48L572.81,367.73L572.98,367.22L568.79,367.27L569.11,368.9L570.26,368.96L570.47,370.97L569.84,371.57L569.93,372.77L567.97,373.13L567.87,374.18L566.53,374.8L566.23,376.97L567.97,378.31L567.71,378.99L568.26,379.8L569.51,379.48L570.12,379.99L569.89,381.28L570.75,381.42L571.35,380.69L571.68,381.56L572.49,381.6L572.58,384.48L570.45,386.31L571.53,387.37L575.34,387.32L576.48,386.31L577.75,387.06L578.55,386.9L578.72,386.35L579.14,388.12L582.26,388.74L582.26,388.74L581.47,393.15L580.4,393.97L579.82,395.87L579.08,395.35L578.2,396.29L577.28,396.38L577.29,397.52L578.35,397.61L579.28,399.98L577.41,400.34L577.11,401.08L574.8,400.87L573.67,400.08L572.75,400.72L573.27,402.26L572.33,403.02L572.9,403.12L572.9,406.09L571.14,407.62L570.94,409.22L568.54,410.96L567.72,412.46L566.65,412.91L565.57,412.67L565.46,413.7L564.67,413.56L564.03,414.13L564.03,414.13L563.23,413.7L563.3,412.5L561.74,411.47L557.87,411.88L557.23,410.94L555.76,411.18L555.63,410.36L554.66,409.87L554.24,407.54L553.46,408.06L553.18,407.52L552.19,407.79L552.13,406.67L551.61,406.4L549.85,407.78L550.64,408.52L550.35,409.52L548.88,409.93L546.92,411.56L545.91,411.15L545.41,411.64L544.54,410.6L544.91,410.04L544.56,409.77L546.56,408.07L547.67,406.07L544.73,404.27L543.76,404.56L543.09,406.83L542.24,406.82L539.6,408.5L538.88,407.79L538,407.92L538,407.92L537.23,405.88L537.12,402.37L536.06,401.04L535.09,400.83L534.83,399.78L535.59,399.16L534.97,398.75L535.21,397.8L533.26,395.38L533.52,394.35L534.62,394.05L534.62,392.72L537.23,391.28L536.87,390.53L535.54,390.11L534.7,388.6L533.39,389.1L531.94,387.66L530.97,388.6L530.32,387.03L529.52,386.78L528.33,384.83L528.33,384.83L528.41,383.41L529.8,381.78L529.94,380.84L532.2,379.27L533.94,379.57L535.17,379.04L535.49,373.58L534.78,368.75L534.3,368.46L535.34,367.54L533.5,369.09L533.31,368.51L533.16,368.93L532.38,368.65L532,369.91L530.61,370.02L528.8,367.47L527.48,367.8L527.47,367.3L526.14,367.25L526.14,363.27L522.15,361.35L522.76,360.8L522.44,359.18L522.85,358.72L524.05,359.8L525.49,359.83L527.33,359.09L528.25,356.19L527.62,355.4L528.01,353.55L528.68,353.53L528.87,352.71L531.71,352.3L530.81,349.43L531.44,349.31L531.64,347.98L530.57,347.83L531.23,345.53L531.87,345.02L533.86,344.93L534.43,345.96L534.87,345.52L535.88,345.99L536.09,347.44L537.04,348.1L537.23,349.32L538.33,350.45L541.8,348.99L541.87,348.25L543.42,347.42L544.39,347.69L544.48,346.42L542.96,344.27L543.61,341.8L540.93,341.91L540.88,341.21L538.99,340.21L538.31,338.99L538.71,337.22L538.71,337.22L539.3,337.63z'/><path id='1614' class='Faction2' d='M546.46,257.82L545.19,257.69L545.32,258.18L543.54,257.65L541.38,259.38L542.02,260.56L540.61,260.4L538.66,258.32L536.13,258.13L535.82,258.52L535.34,258.01L533.87,259.42L533.2,259.42L532.34,257.98L530.81,258.02L529.74,257.1L529.84,255.69L529,255.13L530.84,254.47L530.2,254L530.15,252.87L528.99,252.2L529.29,251L531.38,249.47L533.13,249.19L533.53,248.49L534.28,249.13L534.78,247.81L535.79,247.12L535.17,245.59L533.4,244.1L533.46,243.33L532.94,243.15L533.23,242.5L535.15,241.24L536.1,241.87L537.59,241.28L539.29,238.42L540,238.94L541.47,238.45L542.04,238.74L540.53,236.05L542.23,236.64L541.97,235.28L543.78,235.25L544.4,233.9L545.04,234.33L544.79,235.26L545.4,236.52L547.05,237.66L548.92,239.98L550.77,239.84L552.86,240.63L555.26,240.44L555.25,240.92L554.36,240.98L554.53,241.89L552.78,241.9L551.46,243.23L551.74,245.25L553.79,247.69L553.79,247.69L553.79,248.62L551.45,250.07L551.45,250.07L548.96,250.95L546.19,250.97L546.21,253.02L547.91,253.88L548.31,254.99L547.66,256.41L547.66,256.41z'/></g>
    </svg>

JSFiddle

希望找到解决方案。感谢

0 个答案:

没有答案