d3.js beeswarm plot 上的條件顏色

Question

我正在嘗試為我的 beeswarm plot 中的特定點着色。 我的條件是：如果 id 與參數中的 id 匹配，則為點着色。

因此，我猜是這樣的： svg 上的.attr("fill", function(d) {if("myCondition")return "red"; })

我的數據如下所示： { id: 1, name: ItemA, size: 15 }

當我在 ItemA 的頁面上時，它在 plot 上的對應點應該是紅色的。

“myCondition”應該是什么才能得到這個結果？

這是 d3 網站上要擺弄的代碼（例如，您可以在其中嘗試根據年份或加速度着色） https://observablehq.com/@d3/beeswarm

我很確定我的代碼行必須添加到最后的const dot = svg.append("g")

Answer 1

對於那些感興趣的人，我做了這些修改： 在 d3.js 文件中：

const idFetch = d3.map(data, item) //create an array of my data's ID

並在 svg 創建中：

.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})

然后在調用 Beeswarm function 時，在選項中：

item: d => d.id,
activeSampleId: this.sampleId, //Vue options API