D3数据映射“无法读取未定义的属性” setProperty”

Question

我正在尝试使用D3之上构建的Datamaps库来显示自定义插件以覆盖在我的世界地图上。我已经在地图上成功覆盖了一个甜甜圈图；但是，我想添加悬停事件以更改甜甜圈的样式。

我的问题：每当执行悬停事件（例如“ mouseover”）并尝试更改属性或样式时，都会出现以下错误。

这是我到目前为止的代码。

/**
 * 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';
            }
        }
    }
})();

任何帮助将不胜感激。谢谢！