D3.js Zoom не работает с Interactive Scatterplot с всплывающей подсказкой

Question

Я работал над небольшим проектом, который бы строил интерактивную диаграмму рассеяния и рисовал все. В настоящее время он использует набор данных, включающий статистические данные, отсортированные по странам и регионам. Кроме того, я создал специальную всплывающую подсказку с помощью html div, чтобы показать страну и статистику.

Моя проблема в том, что, хотя все работает нормально, когда я пытаюсь добавить функцию масштабирования, график фактически не меняется, а подсказка делаеттоже не работает.

Я попробовал учебники и примеры, найденные в этих двух ссылках, но безрезультатно: Используя второй пример из этого:

https://www.d3 -graph-gallery.com / graph / interactivity_zoom.html

и еще один здесь

https://tomroth.com.au/zoom-minimal/

После создания SVG, вот две шкалы, которые я в итоге создал:

'''
xScale = d3.scaleLinear()
           .domain([0,d3.max(data,function(d) { return parseFloat(d[xKey]); })])
           .range([padding,w-padding*2.5]);

            yScale = d3.scaleLinear()
                        .domain([0,d3.max(data,function(d){ return parseFloat(d[yKey]);})])
                        .range([h-padding,padding]);

//Draw Axis
            var xAxis = d3.axisBottom(xScale).tickFormat(formatPerc).ticks(7);
            var yAxis = d3.axisLeft(yScale).tickFormat(formatPerc).ticks(5);

//svgXAxis = 
            svg.append('g')
                        .attr('class','x axis line')
                        .attr('transform','translate(0,'+(h-padding)+')')
                        .call(xAxis);

            //svgYAxis = 
            svg.append('g')
                        .attr('class','y axis line')
                        .attr('transform','translate('+padding+' ,0)')
                        .call(yAxis);

'''

Однако я подозреваю, что ошибка может быть связана с самими кружками, поэтому я включил соответствующий код ниже:

'' '

var circles = svg.selectAll('circle')
                .data(data);

         circles.enter()
                .append('circle')
                .attr('clip-path','url(#chart-area)')
                .attr('class',function(d){return d['Region'].trim()})
                .attr('id',function(d,i){return i})
                .attr('cx',function(d)
                {
                    num = parseFloat(d[xKey]);
                    return xScale(num);
                })
                .attr('cy',function(d)
                {
                    num = parseFloat(d[yKey]);
                    return yScale(num);
                })
                .attr('r',5)
                .style('opacity',1)
                .attr('fill',function(d)
                {
                    return colorScale(d.Region.trim());
                })
                .on('mouseover',function(d)
                {
                    d3.select(this)
                    .transition()
                    .attr('r',8)
                    .attr('fill','purple')

                    //Tooltip funcionality
                    var xPosition = parseFloat(d3.select(this).attr("cx"))+(padding*4.7);
                    var yPosition = parseFloat(d3.select(this).attr("cy"))+padding*1.3;

                    d3.select('#tooltip')
                        .style('left',xPosition+'px')
                        .style('top',yPosition+'px')
                        .select('#country_label')
                        .text(d["Country"].trim())

                    d3.select("#tooltip").select("#xtoolLabel").text(xKey+":  ")
                    d3.select("#tooltip").select("#ytoolLabel").text(yKey+":  ")

             //For main we assume the data to be loaded is all numerical
                    xnum=parseFloat(d[xKey])
                    ynum=parseFloat(d[yKey])

                    if (xKey.includes("%"))
                    {
                        d3.select('#tooltip')
                            .select('#xtool')
                            .text(xnum+"%")
                    }
                    else if (xnum<=1)
                    {
                     d3.select('#tooltip')
                        .select('#xtool')
                        .text(formatLabel(xnum))
                    }
                    else{
                        d3.select('#tooltip')
                            .select('#xtool')
                            .text(xnum)
                    }

                    if (yKey.includes("%"))
                    {
                        d3.select('#tooltip')
                            .select('#ytool')
                            .text(ynum+"%")
                    }
                    else if (ynum<=1)
                    {
                    d3.select('#tooltip')
                        .select('#ytool')
                        .text(formatLabel(ynum))
                    }
                    else
                    {
                        d3.select('#tooltip')
                            .select('#ytool')
                            .text(ynum)
                    }

                    d3.select('#tooltip').classed('hidden',false);
                })
                .on('mouseout',function(d)
                {
                    d3.select(this)
                    .transition()
                    .duration(500)
                    .attr('r',5)
                    .attr('fill',colorScale(d.Region.trim()))

                    d3.select('#tooltip').classed('hidden',true);
                 })
                .on('click',function()
            {

                d3.select(this)
                .transition()
                .style('opacity',0)
                .remove();

                d3.select('#tooltip').classed('hidden',true)
            })
                .append('title')
                .text(function(d){
                    return d["Country"].trim();
                });

' ''

Чтобы этот код не стал больше, я не включил раскрывающееся меню, которое позволяет пользователю выбирать категории X и Y (которые все еще работают), цветовую шкалу (которая классифицируется по регионам), ифункция измененияs связан с выпадающим меню

После попытки кода в учебных пособиях выше, я не столкнулся с какими-либо проблемами с консолью. Скорее с первой ссылкой, добавив невидимый прямоугольник, моя интерактивность с моими кругами прекратилась (я подозреваю, что прямоугольник поверх остановил d3js от распознавания окружностей внизу) и, следуя второму уроку, при прокрутке страницы не двигался (поэтому япредположим, что функция масштабирования работает в самом графике), однако на графике тоже ничего не изменилось. Однако всплывающая подсказка все еще работала.

Примечание. До сих пор у меня не было проблем с другими реализациями в D3 js, однако любая обратная связь, связанная с функцией масштабирования, ценится, так как это заставляет меня сказать это. вежливо, совершенно безумно.