Tengo la siguiente estructura de objeto:

 date: 01.01.2022, type: 1, property: a value: 0 },{ date: 01.01.2022, type: 1, property: b value: 2 },{ date: 01.01.2022, type: 2, property: a value: 10 },{ date: 02.01.2022, type: 1, property: a value: 0 },{ date: 02.01.2022, type: 1, property: b value: 2 },{ date: 02.01.2022, type: 2, property: a value: 50 }, ]

Quiero generar un gráfico de columnas apiladas agrupadas con estos datos, donde la fecha define la categoría en el eje x, el tipo representa un grupo y las propiedades están representadas por pilas.

 let categoryNames = data.map(function (d) { return d.date }); let groupNames = data.map(function (d) { return d.type] }); let stackNames = data.map(function (d) { return d.property] }); x0.domain(categoryNames); x1.domain(groupNames).rangeRound([0, x0.bandwidth()]); [...] g.append("g") .selectAll("g") .data(data) .enter().append("g") .attr("fill", function (d) { return z(d.key); }) .selectAll("rect") .data(d3.stack().keys('property')(data)) .enter().append("rect") .attr("x", function (d) { return x0(d.date]); }) .attr("y", function (d) { return y(d['value']) }) .attr("height", function (d) { return ((height - y(0)) > 0 ? (height - y(0)) : 0); })

Probé la solución de Kyros Koh mencionada aquí: ¿Cómo hacer un gráfico de barras apiladas agrupadas en d3js? https://jsfiddle.net/46em2svg/ pero hay un error con .stackedBars con d3-versión 5.x y no pude solucionarlo.

d3.rollup() o d3.group() no funcionan en esta estructura de objeto. ¿Tiene alguna sugerencia sobre cómo puedo implementar un gráfico de columnas agrupadas y apiladas con esta estructura de objetos o cómo puedo redefinir la estructura de objetos sin inflar la estructura de datos?

Gracias por su ayuda de antemano.