https://shukabit.co.il/themes/_dec20/scripts/d3_pie.js?v=230723a1

1const nodeid = +document.getElementById('rt_node_id_944_htm').value;
2
3var data = [];
4if (nodeid === 8) {
5    data = [
6      {
7        name: 'טיפול רפואי בחו"ל',
8        percentage: 40, // percentage
9        value: 40, // millions
10        color: '#c9475f',
11      },
12      {
13        name: 'ביטול/קיצור נסיעה',
14        percentage: 35,
15        value: 35,
16        color: '#c9475f',
17      },
18      {
19        name: 'אובדן מטען/ איחור בהגעת מטען',
20        percentage: 11,
21        value: 11,
22        color: '#c9475f',
23      },
24      {
25        name: 'פציעה בסקי וספורט אתגרי',
26        percentage: 9,
27        value: 9,
28        color: '#c9475f',
29      },
30      {
31        name: 'אחר',
32        percentage: 5,
33        value: 5,
34        color: '#c9475f',
35      }
36    ];
37} else  if (nodeid === 6) {
38    data = [
39      {
40        name: 'פגעתי ברכב',
41        percentage: 35, // percentage
42        value: 35, // millions
43        color: '#c9475f',
44      },
45      {
46        name: 'אחר פגע בי',
47        percentage: 25,
48        value: 25,
49        color: '#c9475f',
50      },
51      {
52        name: 'נתקעתי בדרך',
53        percentage: 20,
54        value: 20,
55        color: '#c9475f',
56      },
57      {
58        name: 'שבר למראה או פנס',
59        percentage: 15,
60        value: 15,
61        color: '#c9475f',
62      },
63      {
64        name: 'פריצה',
65        percentage: 5,
66        value: 5,
67        color: '#c9475f',
68      },
69    ];
70}
71const svg = d3
72  .select('#pieWrapper');
73
74const width = 340;
75const height = 340;
76
77// compute the radius as half the minor size between the width and height
78const radius = Math.min(width, height) / 2;
79// initialize a variable to have the multiple elements share the same stroke-width property
80const strokeWidth = 10;
81
82const group = svg
83  .append('svg')
84  .attr('viewBox', '0 0 400 600')
85  .append('g')
86  .attr('transform', `translate(10 10)`);
87
88
89// DEFAULT CIRCLE
90// circle used as a background for the colored donut chart
91// add a group to center the circle in the canvas (this to rotate the circle from the center)
92const groupDefault = group
93  .append('g')
94  .attr('transform', `translate(${width / 2} ${height / 2})`);
95
96// append the circle showing only the stroke
97groupDefault
98  .append('circle')
99  .attr('cx', 0)
100  .attr('cy', 0)
101  .attr('r', radius)
102  .attr('transform', 'rotate(-90)')
103  .attr('fill', 'none')
104  .attr('stroke', 'hsla(0, 0%, 0%, 0.00')
105  .attr('stroke-width', strokeWidth)
106  .attr('stroke-linecap', 'round')
107  // hide the stroke of the circle using the radius
108  // this to compute the circumference of the shape
109  .attr('stroke-dasharray', radius * 3.14 * 2)
110  .attr('stroke-dashoffset', radius * 3.14 * 2);
111
112
113// COLORED CIRCLES
114// pie function to compute the arcs
115const pie = d3
116  .pie()
117  .sort(null)
118  .padAngle(0.12)
119  // use either the value or the percentage in the dataset
120  .value(d => d.value);
121
122// arc function to create the d attributes for the path elements
123const arc = d3
124  .arc()
125  // have the arc overlaid on top of the stroke of the circle
126  .innerRadius(radius)
127  .outerRadius(radius);
128
129/* for each data point include the following structure
130g             // wrapping all arcs
131  g           // wrapping each arc
132    arc       // actual shape
133    line      // connecting line
134    text      // text label
135  g
136    arc
137    ...
138*/
139// wrapping group, horizontally centered
140const groupArcs = group
141  .append('g')
142  .attr('transform', `translate(${width / 2} ${height / 2})`);
143
144const groupsArcs = groupArcs
145  .selectAll('g')
146  .data(pie(data))
147  .enter()
148  .append('g');
149
150// include the arcs specifying the stroke with the same width of the circle element
151groupsArcs
152  .append('path')
153  .attr('d', arc)
154  .attr('fill', 'none')
155  .attr('stroke', d => d.data.color)
156  .attr('stroke-width', strokeWidth * 0.8)
157  .attr('stroke-linecap', 'round')
158  .attr('stroke-linejoin', 'round')
159  // hide the segments by applying a stroke-dasharray/stroke-dashoffset equal to the circle circumference
160  // ! the length of the element varies, and it considered afterwords
161  // for certain the paths are less than the circumference of the entire circle
162  .attr('stroke-dasharray', radius * 3.14 * 2)
163  .attr('stroke-dashoffset', radius * 3.14 * 2);
164
165// include line elements visually connecting the text labels with the arcs
166/**
167groupsArcs
168  .append('line')
169  .attr('x1', 0)
170  .attr('x2', (d) => {
171    const [x] = arc.centroid(d);
172    return x > 0 ? '49' : '-49';
173  })
174  .attr('y1', 0)
175  .attr('y2', 0)
176  .attr('stroke', ({ data: d }) => '#474747')
177  .attr('stroke-width', 1.5)
178  .attr('transform', (d) => {
179    const [x, y] = arc.centroid(d);
180    const offset = x > 0 ? 80 : -80;
181    return `translate(${x + offset} ${y})`;
182  })
183  .attr('stroke-dasharray', 25)
184  .attr('stroke-dashoffset', 25);
185**/
186// include text elements associated with the arcs
187
188function joinWords(list) {
189  return list.join(' ');
190}
191function splitToWords(str) {
192  return str.trim().split(/\s+/);
193}
194function countWords(str) {
195  return str.trim().split(/\s+/).length;
196}
197function break2tspans(str, precentage) {
198  var html = '';
199  var cnt = countWords(str);
200  var listWords = splitToWords(str);
201  var lineCounts = 1;
202  var wordLines = [
203    listWords.slice(0, 3)
204  ];
205  if (listWords.length > 3) {
206    wordLines.push(listWords.slice(3, 6));
207    lineCounts++;
208  }
209  var xToAddPrecentage = lineCounts - 1;
210  for(var x = 0; x < wordLines.length; x++){
211    if(wordLines[x].length > 0) {
212      html += '<tspan style="display:block;height:28px;line-height:28px;text-align:right;direction:rtl;" ';
213      html += ' ';
214      html += '>';
215      html += joinWords(wordLines[x])
216      if (x === xToAddPrecentage) {
217        html + ' ' + precentage + '%';
218      }
219      html += '</tspan>';
220      html += '<tspan></tspan>'
221    }
222  }
223  console.log(html)
224  return html;
225}
226
227var insertLinebreaks = function (t, d, width) {
228    var el = d3.select(t);
229    var p = d3.select(t.parentNode);
230    p.append("foreignObject")
231        .attr('x', -width/2)
232        .attr("width", width)
233        .attr("height", 200)
234      .append("xhtml:p")
235        .attr('style','word-wrap: break-word; text-align:center;')
236        .html(d);
237
238    el.remove();
239
240};
241
242groupsArcs
243  .append('text')
244  .attr('x', 0)
245  .attr('y', 0)
246  .attr('font-size', 22)
247  .attr('text-anchor', (d) => {
248    const [x] = arc.centroid(d);
249    return x > 0 ? 'start' : 'end';
250  })
251  .attr('transform', (d) => {
252    const [x, y] = arc.centroid(d);
253    const offset = x > 0 ? 100 : -100;
254    return `translate(${x + offset} ${y})`;
255  })
256  .html(({ data: d }) => {
257    return break2tspans(d.name, d.percentage)
258    //return `<p>${d.name} ${d.percentage}%</p>`
259  })
260  .style('opacity', 0)
261  .style('visibility', 'hidden');
262
263//
264//  `<tspan x="0" class="text-box-title-201">${d.name} ${d.percentage}%</tspan>`
265
266// TRANSITIONS
267// once the elements are set up
268// draw the stroke of the larger circle element
269groupDefault
270  .select('circle')
271  .transition()
272  .ease(d3.easeExp)
273  .delay(200)
274  .duration(400)
275  .attr('stroke-dashoffset', '0')
276  // once the transition is complete
277  // draw the smaller strokes one after the other
278  .on('end', () => {
279    // immediately set the stroke-dasharray and stroke-dashoffset properties to match the length of the path elements
280    // using vanilla JavaScript
281    const paths = document.querySelectorAll('svg g g path');
282    paths.forEach((path) => {
283      const length = path.getTotalLength();
284      path.setAttribute('stroke-dasharray', length);
285      path.setAttribute('stroke-dashoffset', length);
286    });
287
288    const duration = 300;
289    // transition the path elements to stroke-dashoffset 0
290    d3
291      .selectAll('svg g g path')
292      .transition()
293      .ease(d3.easeLinear)
294      .delay((d, i) => i * duration)
295      .duration(duration)
296      .attr('stroke-dashoffset', 0);
297
298    // transition the line elements elements to stroke-dashoffset 0
299    d3
300      .selectAll('svg g g line')
301      .transition()
302      .ease(d3.easeLinear)
303      .delay((d, i) => i * duration + duration / 2.5)
304      .duration(duration / 3)
305      .attr('stroke-dashoffset', 0);
306
307    // transition the text elements to opacity 1 and visibility visible
308    d3
309      .selectAll('svg g g text')
310      .transition()
311      .ease(d3.easeLinear)
312      .delay((d, i) => i * duration + duration / 2)
313      .duration(duration / 2)
314      .style('opacity', 1)
315      .style('visibility', 'visible')
316      .attr("width", 2500)
317      .attr("height", 4000);
318  });