D3 Datamaps 'Не могу прочитать свойство' setProperty 'из неопределенного'

Question

Я пытаюсь использовать библиотеку Datamaps, созданную поверх D3, для отображения пользовательского плагина для наложения поверх моей карты мира.Я успешно наложил карту пончика на карту;однако я хотел добавить события наведения мыши, чтобы изменить стиль пончика.

Моя проблема: всякий раз, когда я выполняю событие наведения мыши, такое как «наведение мыши», и пытаюсь изменить атрибут или стиль, я получаю следующую ошибку.

Вот код, который у меня есть до сих пор.

/**
 * Adds a custom plugin to show an indicator (donut)
 */
(function() {
    if (typeof Datamap !== 'undefined') {
        Datamap.indicators = function (layer, data, options) {
            var self = this,
                width       = options.width,
                height      = options.height,
                thickness   = options.thickness,
                svg         = this.svg,
                radius      = Math.min(width, height) / 2,
                color       = d3.scale.category10().domain([0, 1, 2, 3, 4, 5, 6, 7, 8, 9]);

            if (!data || (data && !data.slice)) {
                throw "Datamaps Custom Plugin Error - indicators must be an array";
            }

            // Build indicators
            var indicators = layer.selectAll('indicator.datamaps-indicator')
                                  .data(data, JSON.stringify);

            var arc = d3.svg.arc()
                        .innerRadius(radius - thickness)
                        .outerRadius(radius);

            var pie = d3.layout.pie()
                        .value(function(d) {
                            return d.value;
                        })
                        .sort(null);

            indicators.enter()
                .append('g')
                .attr('class', 'datamaps-indicator')
                .attr('width', width)
                .attr('height', height)
                .attr('transform', function(data) {
                    var latLng;
                    if (hasCoordinates(data)) latLng = self.latLngToXY(data.latitude, data.longitude);
                    else if (data.centered) latLng = self.path.centroid(svg.select('path.' + data.centered).data()[0]);
                    if (latLng) return 'translate(' + latLng[0] + ',' + latLng[1] + ')'
                })
                .selectAll('path')
                .data(function(d) {
                    return pie(d.split);
                })
                .enter()
                .append('g')
                .on('mouseover', d => {
                    let g = d3.select(this)
                        .attr('fill', 'black')
                        .style('cursor', 'pointer')
                        .style('fill', 'black')
                        .append('g')
                        .attr('class', 'text-group');

                    // Used for the name
                    g.append('text')
                        .attr('class', 'name-text')
                        .text(`${d.data.name}`)
                        .attr('text-anchor', 'middle')
                        .attr('dy', '-1.2em');

                    // Used for the score / percentage
                    g.append('text')
                        .attr('class', 'value-text')
                        .text(`${d.data.value}`)
                        .attr('text-anchor', 'middle')
                        .attr('dy', '.6em');
                })
                .on('mouseout', _ => {
                    d3.select(this)
                        .style('cursor', 'none')
                        .style('fill', color(this._current))
                        .select('.text-group').remove()
                })
                .append('path')
                .attr('d', arc)
                .attr('fill', function(_, i) {
                    return color(i);
                })
                .on('mouseover', d => {
                    d3.select(this)
                        .style('cursor', 'none')
                        .style('fill', color(this._current));
                })
                .each((_, i) => { this._current = i; });

            indicators.exit()
                .transition()
                .delay(options.exitDelay)
                .attr('height', 0)
                .remove();

            // Checks if a marker has latitude and longitude provided.
            function hasCoordinates(data) {
                return typeof data !== 'undefined' && typeof data.latitude !== 'undefined' && typeof data.longitude !== 'undefined';
            }
        }
    }
})();

Любая помощь будет оценена.Спасибо!