pbiviz D3.js library issue

Hi samuts,

Your issue is that you can't always lift and shift JS code to TypeScript without declaring types for things like variables and class properties - the error points at this:

You need to specify a structure for barGroups. The ideal way is to declare an interface for your inner data points, e.g.:

interface IDataPoint {
    min: number;
    max: number;
}

Next, you need to give type your barGroups property in your class declaration. As each 'row' is a nested array of the above interface you'd type this as follows:

private barGroups : IDataPoint[][];

You then need to specify how d3 needs to type your data so its structure is known when binding to the DOM. The easiest way to do this is in the initial .data() chain as below:

groupElements.each(function (_, i) {
    d3.select(this)
        .selectAll(".bar")
        .data((d: IDataPoint[]) => d)  // <---- changes made here
        .enter()
        .append("rect")
        .classed("bar", true)
        .attr("x", (d) => xx(d.min))
        .attr("width", (d) => xx(d.max - d.min))
        .attr("y", i * 37.5 + 4)
        .attr("height", 37.5 - 2 * 4)
        .attr("fill", colorsX[i % colorsX.length]);

});

Here's my results when I run the visual:

Hopefully this gets you moving in the right direction. Good luck!

Daniel