I am facing an issue while trying to associate symbols with data points in a Power BI scatterchart using d3. Initially, I managed to make all of them crosses by utilizing the following code:
.attr("d", d3.svg.symbol().type("cross"))
My aim was to further enhance this functionality by incorporating an "if" statement to assign symbols based on values within a column labeled "component". The four possible component values are OA, OI, RA, and CA. My attempt involved setting cross symbols for data points related to the OA component and circles for the rest. Here is what I tried implementing:
.attr("d", function(d) {
if (d.component === "OA") { return d3.svg.symbol().type("cross") }
else { return d3.svg.symbol().type("circle") };
})
However, upon execution, I encountered the following error message.
[ts] Argument of type '(d: ScatterChartDataPoint) => Symbol<{}>' is not assignable to parameter of type '(datum: ScatterChartDataPoint, index: number, outerIndex: number) => Primitive'. Type 'Symbol<{}>' is not assignable to type 'Primitive'. Type 'Symbol<{}>' is not assignable to type 'false.
I am seeking guidance on resolving this issue. It is essential that any solution provided is compatible with d3 v3.5.5 as I cannot migrate to d3 v4 at this time.