I'm trying to color a specific dot in my beeswarm plot. My condition is: color the dot if the id matches the id in the params.
Therefore, i'm guessing something like this :
.attr("fill", function(d) {if("myCondition")return "red"; }) on the svg
My data looks like this :
{ id: 1, name: ItemA, size: 15 }
When i'm on the page of ItemA, its corresponding dot on the plot should be coloured red.
What should "myCondition" be to have this result ?
Here's the code on d3's website to fiddle with (where you can try colouring according to Year or Acceleration for example) https://observablehq.com/@d3/beeswarm
I'm quite sure my line of code has to be added in the const dot = svg.append("g") at the end
For those interested, i did these modifications : In the d3.js file :
const idFetch = d3.map(data, item) //create an array of my data's ID
and in the svg creation :
.attr("fill",function(d) {if(idFetch[d] === activeSampleId) return 'red'}) //With active sample ID an option, equal to the ID of the page I'm on (item/{activeSampleId})
Then upon calling the Beeswarm function, in the options :
item: d => d.id,
activeSampleId: this.sampleId, //Vue options API