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