Estoy tratando de trazar un gráfico usando D3 y reaccionar. Los datos de muestra que he estado usando son de este formato.

 [{ "date": "01-01-2022", "site": "Site 1", "type": "circle" }, { "date": "01-01-2022", "site": "Site 4", "type": "square" } ... ]

La xScale y yScale se declaran como

 const xValue = (d) => d.date; const xScale = scaleTime() .domain(extent(data, xValue)) .range([0, innerWidth]); const yValue = (d) => d.site; const yScale = scaleThreshold() .domain(data.map((d) => yValue(d))) .range([ "Site 1", "Site 2", "Site 3", "Site 4", "Site 5", "Site 6", "Site 7", "Site 8", "Site 9" ]);

Y el componente del eje x, AxisBottom , con tickFormat se define como const xAxisTickFormat = timeFormat("%B");

 export const AxisBottom = ({ xScale, innerHeight, tickFormat, tickOffset = 3 }) => { return xScale.ticks().map((date) => ( <g className="tick" key={date} transform={`translate(${xScale(date)}, ${0})`} > <text y={innerHeight + tickOffset} dy=".7em" style={{ textAnchor: "middle" }} > {tickFormat(date)} </text> </g> )); };

Lo que estoy tratando de lograr es para todos los puntos de datos durante un mes, digamos que January muestra January una vez como texto en el eje x. El trabajo hasta ahora ha sido compilado en codesandbox . Cualquier sugerencia sería realmente útil.