I tried to make a d3 voronoi map using this plugin with svelte
generally I’m following from this block
I debugging the step one by one, the <svg> attribute are changing, the <g> are appended, but likely the <path> “d” attribute is not drawing.
App.svelte
<script>
import Voronoi from './Voronoi.svelte'
</script>
<Voronoi />
Voronoi.svelte
<script>
import * as d3 from 'd3'
import { voronoiMapSimulation } from 'd3-voronoi-map'
import { onMount } from 'svelte'
let el;
var svgWidth = 300,
svgHeight = 300,
const data = Array(50) // array of random weight data
.fill()
.map(() => {
return {
name: 'Lorem Ipsum',
weight: Math.random() * 10,
color: 'indianred'
}
})
var simulation = voronoiMapSimulation(data)
.weight((d) => { return d.weight})
.clip([[0,0], [0,height], [width, height], [width,0]])
.stop();
var state = simulation.state();
while (!state.ended) {
simulation.tick();
state = simulation.state();
}
var polygons = state.polygons;
console.log(polygons) // logging the polygons data
console.log("M" + polygons.join(",") + "z") // logging the join() function
onMount(() => {
let container = d3.select(el) //all this part is working just fine
.attr('width', svgWidth)
.attr('height', svgHeight)
.style('background-color', 'steelblue')
.append('g')
.classed('cells', true)
let cells = container.select('.cells')
.selectAll('cell')
.data(polygons)
cells.enter()
.append('path') // no path are appended
.classed('cell', true)
.merge(cells)
.attr("d", (d) => { return "M" + d.join(",") + "z"; }) // this is not working
.style("stroke", "blue")
.style("fill", (d) => {
return d.site.originalObject.data.originalData.color;
}) // fill color not working, I think because the path isn't drawing
})
</script>
<svg bind:this={el}>
</svg>
I tried to logged the polygons and the join() and it’s all works
When I logged the console.log("M" + polygons.join(",") + "z"), I found some e- in the middle of it, but I don’t know if it’s a problem
raw joined data:
M209.6394882056722,217.76062259711614,219.42214407592596,220.71658449764695,234.0138478892624,206.53431131421576,228.5165979310529,177.208426003887,197.4853179971005,186.41562396678216,209.6394882056722,217.76062259711614,178.3735779994064,227.4558182808313,168.21077190089068,246.70089924035258,171.7040449179756,262.52611665364,186.89310684521044,280,220.72567208302175,280,233.35340337206247,245.5035233326811,219.42214407592596,220.71658449764695,209.6394882056722,217.76062259711614,197.4853179971005,186.41562396678216,193.57555189055475,185.2087397816168,166.13924406602845,214.1544295658894,178.3735779994064,227.4558182808313,82.21067155063123,224.6943258375931,48.92937799382137,219.69303326753993,35.00204547718623,248.46584194163455,44.28155228176286,280,87.9590507628975,280,94.97020286206087,238.62435553119815,82.21067155063123,224.6943258375931,94.63620810293207,202.41073752194703,83.08693585693416,186.84266735137402,59.64348348742079,189.15440852222932,48.42376757375917,218.6108056245493,48.92937799382137,219.69303326753993,82.21067155063123,224.6943258375931,94.97020286206087,238.62435553119815,111.11411486203988,233.15769900415094,110.18676671497265,206.08731035498698,94.63620810293207,202.41073752194703,273.19762214942193,220.93476608019907,234.0138478892624,206.53431131421576,219.42214407592596,220.71658449764695,233.35340337206247,245.5035233326811,249.49566663035924,245.61916298707754,273.19762214942193,220.93476608019907,280,219.55472766742125,280,171.05642440945795,253.11974482703565,163.50173433695755,230.12443658612182,174.71448532603955,228.5165979310529,177.208426003887,234.0138478892624,206.53431131421576,280,219.55472766742125,273.19762214942193,220.93476608019907,249.49566663035924,245.61916298707754,270.5519054979295,280,280,280,55.040257009505204,94.99527708231432,66.55721194150495,93.38443171386717,71.86381939512091,89.46265542646103,71.28823242293244,51.09955482632813,46.07344966286643,54.047160935084236,36.14479135970286,70.24518393350495,55.040257009505204,94.99527708231432,45.48903689955725,119.91411961625694,52.10581889556727,127.95480417222322,78.7410000401472,121.37424947129921,80.86505739177431,112.29359480152539,66.55721194150495,93.38443171386717,55.040257009505204,94.99527708231432,36.14479135970286,70.24518393350495,0,74.85791443445417,0,120.50990139508698,45.48903689955725,119.91411961625694,48.92937799382137,219.69303326753993,48.42376757375917,218.6108056245493,0,208.95894658367183,0,247.8273296890119,35.00204547718623,248.46584194163455,136.70743987736478,178.14227442960427,121.32967845900127,154.37646962399447,95.00053839040741,152.9664237717475,85.99271773835625,162.86935304352193,83.08693585693416,186.84266735137402,94.63620810293207,202.41073752194703,110.18676671497265,206.08731035498698,135.02364802439817,190.69575060779133,136.70743987736478,178.14227442960427,174.23540685820797,158.1816752389342,174.68350745690972,149.9576760066293,142.95931884050395,129.54930662306106,121.32967845900127,154.37646962399447,136.70743987736478,178.14227442960427,135.02364802439817,190.69575060779133,161.24574733340532,214.24663127017712,166.13924406602845,214.1544295658894,193.57555189055475,185.2087397816168,174.23540685820797,158.1816752389342,210.3531919874576,89.2269090808164,199.3410352689765,94.29144876451383,203.29846160632607,127.84412393808651,224.05462343628366,131.94709667189576,229.33597782418317,97.06955376564063,210.3531919874576,89.2269090808164,225.20656124318964,61.31029126769361,208.97373109436558,37.125024826736706,201.995438067238,34.31231042753116,178.38500088006657,37.85550609344152,161.53749513012312,59.63998063992319,167.6368138874493,81.51177696542273,199.3410352689765,94.29144876451383,210.3531919874576,89.2269090808164,229.33597782418317,97.06955376564063,239.7238527628775,88.9471064167723,230.64494123815066,62.788809798929165,225.20656124318964,61.31029126769361,280,132.63591591541677,252.1370141049501,144.02995184879057,253.11974482703565,163.50173433695755,280,171.05642440945795,279.99999999999994,2.7150392342192953e-14,267.2626310475531,2.842170943040401e-14,257.8589351465698,8.573787931699899,270.64018992021767,40.34912823558824,280,42.55289021993038,197.4853179971005,186.41562396678216,228.5165979310529,177.208426003887,230.12443658612182,174.71448532603955,226.37482403311284,134.6552594274345,224.05462343628366,131.94709667189576,203.29846160632607,127.84412393808651,174.68350745690972,149.9576760066293,174.23540685820797,158.1816752389342,193.57555189055475,185.2087397816168,203.29846160632607,127.84412393808651,199.3410352689765,94.29144876451383,167.6368138874493,81.51177696542273,139.40400196347252,103.6393596991219,142.95931884050395,129.54930662306106,174.68350745690972,149.9576760066293,230.12443658612182,174.71448532603955,253.11974482703565,163.50173433695755,252.1370141049501,144.02995184879057,226.37482403311284,134.6552594274345,83.08693585693416,186.84266735137402,85.99271773835625,162.86935304352193,50.958261288213336,160.5944968165375,49.4503901141156,162.6990558402386,59.64348348742079,189.15440852222932,71.86381939512091,89.46265542646103,88.54900634312853,100.98791397082051,122.20073004101161,91.87336634445683,126.9707473970839,55.66912290970013,121.02627284307691,48.53937248341679,76.50348854377961,46.033896483710286,71.28823242293244,51.09955482632813,71.86381939512091,89.46265542646103,66.55721194150495,93.38443171386717,80.86505739177431,112.29359480152539,88.54900634312853,100.98791397082051,-5.684341886080802e-14,74.85791443445419,36.14479135970286,70.24518393350495,46.07344966286643,54.047160935084236,18.847809394674925,16.815275809380985,0,20.525474213015897,142.95931884050395,129.54930662306106,139.40400196347252,103.6393596991219,122.20073004101161,91.87336634445683,88.54900634312853,100.98791397082051,80.86505739177431,112.29359480152539,78.7410000401472,121.37424947129921,95.00053839040741,152.9664237717475,121.32967845900127,154.37646962399447,168.21077190089068,246.70089924035258,178.3735779994064,227.4558182808313,166.13924406602845,214.1544295658894,161.24574733340532,214.24663127017712,151.98527642701538,239.2216046466324,168.21077190089068,246.70089924035258,151.98527642701538,239.2216046466324,134.65038495788767,246.26372944630424,133.05692458714134,280,161.6067033858581,280,171.7040449179756,262.52611665364,111.11411486203988,233.15769900415094,134.65038495788767,246.26372944630424,151.98527642701538,239.2216046466324,161.24574733340532,214.24663127017712,135.02364802439817,190.69575060779133,110.18676671497265,206.08731035498698,111.11411486203988,233.15769900415094,94.97020286206087,238.62435553119815,87.9590507628975,280,133.05692458714134,280,134.65038495788767,246.26372944630424,85.99271773835625,162.86935304352193,95.00053839040741,152.9664237717475,78.7410000401472,121.37424947129921,52.10581889556727,127.95480417222322,50.958261288213336,160.5944968165375,186.89310684521044,280,171.7040449179756,262.52611665364,161.6067033858581,280,226.37482403311284,134.6552594274345,252.1370141049501,144.02995184879057,280,132.63591591541677,280,95.01615601514837,239.7238527628775,88.9471064167723,229.33597782418317,97.06955376564063,224.05462343628366,131.94709667189576,233.35340337206247,245.5035233326811,220.72567208302175,280,270.5519054979295,280,249.49566663035924,245.61916298707754,122.20073004101161,91.87336634445683,139.40400196347252,103.6393596991219,167.6368138874493,81.51177696542273,161.53749513012312,59.63998063992319,126.9707473970839,55.66912290970013,71.28823242293244,51.09955482632813,76.50348854377961,46.033896483710286,75.70534099535581,0,24.967871750559674,2.842170943040401e-14,18.847809394674925,16.815275809380985,46.07344966286643,54.047160935084236,0,0,-5.684341886080802e-14,20.52547421301591,18.847809394674925,16.815275809380985,24.96787175055968,0,2.842170943040401e-14,166.27543867540044,49.4503901141156,162.6990558402386,50.958261288213336,160.5944968165375,52.10581889556727,127.95480417222322,45.48903689955725,119.91411961625694,0,120.50990139508698,280,95.01615601514837,280,42.552890219930376,270.64018992021767,40.34912823558824,230.64494123815066,62.788809798929165,239.7238527628775,88.9471064167723,166.5619255367633,0,127.1374427032487,0,121.02627284307691,48.53937248341679,126.9707473970839,55.66912290970013,161.53749513012312,59.63998063992319,178.38500088006657,37.85550609344152,127.1374427032487,0,75.70534099535581,0,76.50348854377961,46.033896483710286,121.02627284307691,48.53937248341679,166.5619255367633,0,178.38500088006657,37.85550609344152,201.995438067238,34.31231042753116,196.8236241974641,0,0,280,44.28155228176286,280,35.00204547718623,248.46584194163455,0,247.8273296890119,196.82362419746414,0,201.995438067238,34.31231042753116,208.97373109436558,37.125024826736706,235.83974755823002,0,49.4503901141156,162.6990558402386,-7.105427357601002e-15,166.27543867540044,0,208.95894658367183,48.42376757375917,218.6108056245493,59.64348348742079,189.15440852222932,270.64018992021767,40.34912823558824,257.8589351465698,8.573787931699899,243.97251889316868,0,235.83974755823002,0,208.97373109436558,37.125024826736706,225.20656124318964,61.31029126769361,230.64494123815066,62.788809798929165,243.97251889316868,-4.440892098500626e-16,257.8589351465698,8.573787931699899,267.2626310475531,-1.7763568394002505e-15z