d3.js 사용 시 레이블 텍스트 표시

안녕하세요. d3.js를 써보진 않아서 좋은 해결책일지는 모르겠으나 레이블과 퍼센티지의 z-index를 높여서 차트 위에 덮어지게끔 그려보시는건 어떨까요?

chat GPT를 활용해서 코드를 다음과 같이 수정하였습니다. const percentage = ((d.data.count / Object.values(data).reduce((acc, val) => acc + val, 0)) * 100).toFixed(0).toString(); 부분이 const percentage = Math.round((d.data.count / Object.values(data).reduce((acc, val) => acc + val, 0)) * 100).toString(); 로 바뀌었습니다. 수정코드로 적용하니 정상적으로 표시가 되었습니다.

1import React, { useEffect, useRef } from 'react';
2import * as d3 from 'd3';
3
4interface DeviceInfo {
5  device_manuf: string;
6  device_memory: number;
7  device_os: number;
8}
9
10interface DonutChartProps {
11  data: DeviceInfo[];
12  type: keyof DeviceInfo;
13}
14
15const DonutChart: React.FC<DonutChartProps> = ({ data, type }) => {
16  const chartContainerRef = useRef<HTMLDivElement>(null);
17
18  
19  useEffect(() => {
20
21      if (!data || data.length === 0) {
22      return;
23  }
24
25    d3.select(chartContainerRef.current).selectAll('*').remove();
26
27    const categoryCounts: Record<string, number> = data.reduce((acc: any, device) => {
28      acc[device[type]] = (acc[device[type]] || 0) + 1;
29      return acc;
30    }, {});
31
32    const sortedCategories = Object.keys(categoryCounts).sort((a, b) => categoryCounts[b] - categoryCounts[a]);
33    const topCategories = sortedCategories.slice(0, 4);
34
35    const totalCount = sortedCategories.reduce((sum, category) => sum + categoryCounts[category], 0);
36
37    const dataForChart = topCategories.map(category => ({ category, count: categoryCounts[category] }));
38    const etcCount = totalCount - dataForChart.reduce((sum, entry) => sum + entry.count, 0);
39
40
41    if (sortedCategories.length > 4) {
42      dataForChart.push({ category: 'ETC', count: etcCount });
43    }
44
45    const width = 280;
46    const height = 400;
47    const radius = Math.min(width, height) / 2;
48
49    const colorScheme = ['#006FFD', '#ED3241', '#E86339', '#298267', '#C5C6CC'];
50
51    const color = d3.scaleOrdinal<string>().range(colorScheme);
52
53    const chartTitle =
54      type === 'device_manuf' ? '디바이스 제조사' : type === 'device_memory' ? '디바이스 램용량' : '디바이스 OS 버전';
55
56    const arc = d3.arc<d3.PieArcDatum<{ category: string; count: number }>>()
57      .innerRadius(radius - 100)
58      .outerRadius(radius - 20);
59
60    const pie = d3.pie<{ category: string; count: number }>().value(d => d.count);
61
62    const svg = d3.select(chartContainerRef.current)
63      .append('svg')
64      .attr('width', width)
65      .attr('height', height)
66      .append('g')
67      .attr('transform', `translate(${width / 2},${height / 2})`);
68
69    svg.append('text')
70      .attr('x', 0)
71      .attr('y', -height / 2 + 40)
72      .text(chartTitle)
73      .style('font-size', '16px')
74      .style('font-weight', '900')
75      .style('text-anchor', 'middle')
76      .style('fill', 'black');
77
78    const g = svg.selectAll('.arc')
79      .data(pie(dataForChart))
80      .enter()
81      .append('g')
82      .attr('class', 'arc');
83
84    g.append('path')
85      .attr('d', arc)
86      .style('fill', d => color(d.data.category));
87
88    g.append('text')
89      .attr('transform', d => `translate(${arc.centroid(d)})`)
90      .attr('dy', '-0.5em')
91      .style('text-anchor', 'middle')
92      .style('fill', 'white')
93      .html(d => {
94        const lines = `${d.data.category}\n${Math.round((d.data.count / totalCount) * 100)}%`.split('\n');
95        return lines
96          .map((line, index) => `<tspan x="0" dy="${index === 0 ? '0' : '1.2em'}">${line}</tspan>`)
97          .join('');
98      });
99  }, [data, type]);
100
101  return <div ref={chartContainerRef}></div>;
102};
103
104export default DonutChart;