Conditionnal colours on d3.js beeswarm plot

Question

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

Answer 1

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