Сгруппированная гистограмма D3 из массивов

Question

У меня действительно проблемы с D3, и мне нужна некоторая помощь, чтобы изменить существующую диаграмму на групповую диаграмму. Диаграмма используется во всплывающей подсказке и в настоящее время выглядит следующим образом:

Каждый цвет представляет отрасль промышленности (розовый = розничная торговля, бирюзовый = бакалейные товары ... и т. Д. c). Мне нужно изменить гистограмму так, чтобы она сравнивала процентное изменение в каждой отрасли со средним мировым процентным изменением в этой отрасли.

В данный момент гистограмма создается из массива данных. У меня также есть массив с мировыми процентными значениями.

Итак, представьте:

countryData = [10, -20, -30, -63, -23,20], worldData = [23 , -40, -23, -42, -23,40]

Где индекс 0 = сектор розничной торговли, индекс 1 = продуктовый сектор, et c.

Мне нужно построить сгруппированная диаграмма, сравнивающая каждый сектор со средним мировым показателем (показать среднее значение по миру красным цветом). Это немного сложно объяснить, поэтому я нарисовал его для вас (... извините за плохой рисунок).

Пожалуйста, кто-нибудь может мне помочь изменить моя существующая подсказка? Вот текущий код. Если вы хотите смоделировать изменение значений данных. Если вы хотите удалить мой существующий код, это нормально.

 .on('mouseover', ({ properties }) => {
        // get county data
        const mobilityData = covid.data[properties[key]] || {};


      const {
        retailAverage,
        groceryAverage,
        parksAverage,
        transitAverage,
        workplaceAverage,
        residentialAverage,
      } = getAverage(covid1);



      let avgArray = [retailAverage, groceryAverage, parksAverage, transitAverage, workplaceAverage, retailAverage];
      let categoriesNames = ["Retail", "Grocery", "Parks", "Transit", "Workplaces", "Residential"];




        // create tooltip
        div = d3.select('body')
          .append('div')
          .attr('class', 'tooltip')
          .style('opacity', 0);

        div.html(properties[key]);

        div.transition()
          .duration(200)
          .style('opacity', 0.9);

        // calculate bar graph data for tooltip
        const barData = [];

        Object.keys(mobilityData).forEach((industry) => {
          const stringMinusPercentage = mobilityData[industry].slice(0, -1);
          barData.push(+stringMinusPercentage); // changing it to an integer value, from string
        });

        //combine the two lists for the combined bar graph
        var combinedList = [];
        for(var i = 0; i < barData.length; i++) {
          const stringMinusPercentage2 = +(avgArray[i].slice(0, -1));
          const object = {category: categoriesNames[i], country: barData[i], world: stringMinusPercentage2}
          combinedList.push(object); //Push object into list
        }
        console.log(combinedList);

        // barData = barData.sort(function (a, b) {  return a - b;  });
        // sort into ascending ^ keeping this in case we need it later
        const height2 = 220;
        const width2 = 250;
        const margin = {
          left: 50, right: 10, top: 20, bottom: 15,
        };

        // create bar chart svg
        const svgA = div.append('svg')
          .attr('height', height2)
          .attr('width', width2)
          .style('border', '1px solid')
          .append('g')
        // apply the margins:
          .attr('transform', `translate(${[`${margin.left},${margin.top}`]})`);

        const barWidth = 30; // Width of the bars

        // plot area is height - vertical margins.
        const chartHeight = height2 - margin.top - margin.left;

        // set the scale:
        const yScale = d3.scaleLinear()
          .domain([-100, 100])
          .range([chartHeight, 0]);

        // draw some rectangles:
        svgA
          .selectAll('rect')
          .data(barData)
          .enter()
          .append('rect')
          .attr('x', (d, i) => i * barWidth)
          .attr('y', (d) => {
            if (d < 0) {
              return yScale(0); // if the value is under zero, the top of the bar is at yScale(0);
            }

            return yScale(d); // otherwise the rectangle top is above yScale(0) at yScale(d);
          })
          .attr('height', (d) => Math.abs(yScale(0) - yScale(d))) // the height of the rectangle is the difference between the scale value and yScale(0);
          .attr('width', barWidth)
          .style('fill', (d, i) => colours[i % 6]) // colour the bars depending on index
          .style('stroke', 'black')
          .style('stroke-width', '1px');

        // Labelling the Y axis
        const yAxis = d3.axisLeft(yScale);
        svgA.append('text')
          .attr('class', 'y label')
          .attr('text-anchor', 'end')
          .attr('x', -15)
          .attr('y', -25)
          .attr('dy', '-.75em')
          .attr('transform', 'rotate(-90)')
          .text('Percentage Change (%)');

        svgA.append('g')
          .call(yAxis);
      })
      .on('mouseout', () => {
        div.style('opacity', 0);
        div.remove();
      })
      .on('mousemove', () => div
        .style('top', `${d3.event.pageY - 140}px`)
        .style('left', `${d3.event.pageX + 15}px`));

    svg.append('g')
      .attr('transform', 'translate(25,25)')
      .call(colorLegend, {
        colorScale,
        circleRadius: 10,
        spacing: 30,
        textOffset: 20,
      });

  };

  drawMap(svg1, geoJson1, geoPath1, covid1, key1, 'impact1');
  drawMap(svg2, geoJson2, geoPath2, covid2, key2, 'impact2');
};