Как включить кросс-файлинг в superset/legacy-plugin-chart-country-map?

Я использую legacy-plugin-chart-country-map для отрисовки карты Санкт-Петербурга по 18 административным районам. Как мне настроить кросс-фильтрацию?

const clicked = function clicked(d) {
    const hasCenter = d && centered !== d;
    let x;
    let y;
    let k;
    const halfWidth = width / 2;
    const halfHeight = height / 2;

    if (hasCenter) {
        const centroid = path.centroid(d);
        [x, y] = centroid;
        k = 4;
        centered = d;
    } else {
        x = halfWidth;
        y = halfHeight;
        k = 1;
        centered = null;
    }

    g.transition()
        .duration(750)
        .attr(
            'transform',
            translate($ {
                halfWidth
            }, $ {
                halfHeight
            }) scale($ {
                k
            }) translate($ {
                -x
            }, $ {
                -y
            }),
        );
    textLayer
        .style('opacity', 0)
        .attr(
            'transform',
            translate(0, 0) translate($ {
                x
            }, $ {
                hasCenter ? y - 5 : 45
            }),
        )
        .transition()
        .duration(750)
        .style('opacity', 1);
    bigText
        .transition()
        .duration(750)
        .style('font-size', hasCenter ? 6 : 16);
    resultText
        .transition()
        .duration(750)
        .style('font-size', hasCenter ? 16 : 24);

};

backgroundRect.on('click', clicked);

const selectAndDisplayNameOfRegion = function selectAndDisplayNameOfRegion(
    feature,
) {
    let name = '';
    if (feature && feature.properties) {
        if (feature.properties.ID_2) {
            name = feature.properties.NAME_2;
        } else {
            name = feature.properties.NAME_1;
        }
    }
    bigText.text(name);
};

const updateMetrics = function updateMetrics(region) {
    if (region.length > 0) {
        resultText.text(format(region[0].metric));
    }
};

const mouseenter = function mouseenter(d) {
    // Darken color
    let c = colorFn(d);
    if (c !== 'none') {
        c = d3.rgb(c).darker().toString();
    }
    d3.select(this).style('fill', c);
    selectAndDisplayNameOfRegion(d);
    const result = data.filter(
        region => region.country_id === d.properties.ISO,
    );
    updateMetrics(result);
};

const mouseout = function mouseout() {
    d3.select(this).style('fill', colorFn);
    bigText.text('');
    resultText.text('');
};

function drawMap(mapData) {
    const { features } = mapData;
    const center = d3.geo.centroid(mapData);
    const scale = 100;
    const projection = d3.geo
        .mercator()
        .scale(scale)
        .center(center)
        .translate([width / 2, height / 2]);
    path.projection(projection);

    // Compute scale that fits container.
    const bounds = path.bounds(mapData);
    const hscale = (scale * width) / (bounds[1][0] - bounds[0][0]);
    const vscale = (scale * height) / (bounds[1][1] - bounds[0][1]);
    const newScale = hscale < vscale ? hscale : vscale;

    // Compute bounds and offset using the updated scale.
    projection.scale(newScale);
    const newBounds = path.bounds(mapData);
    projection.translate([
        width - (newBounds[0][0] + newBounds[1][0]) / 2,
        height - (newBounds[0][1] + newBounds[1][1]) / 2,
    ]);
}

введите сюда описание изображения


Ответы (0 шт):