I use legacy-plugin-chart-country-map to create map of the town. But crossfilter doesn't work. What i need to do&
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, ]);
Comment From: dosubot[bot]
The legacy-plugin-chart-country-map does not support crossfilter functionality because it uses a legacy API and is implemented with imperative D3.js rendering. This means it does not emit filter events or interact with Superset's crossfilter/data mask system, which is required for crossfiltering to work between charts. This is a limitation of the plugin's architecture, not a configuration issue or bug. There is no built-in way to enable crossfilter for this chart type as it stands today country map plugin code.
If you need crossfilter functionality, consider using a modern chart plugin (such as ECharts-based maps or other supported plugins) that is integrated with Superset's crossfilter infrastructure. These plugins emit filter events and support interactive filtering between charts example of crossfilter in ECharts.
If you have further questions or need guidance on migrating to a supported chart type, let me know!
To reply, just mention my name @dosu.
How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other 
Comment From: rusackas
Are you referring to emitting cross filters (currently not supported) or receiving/applying cross filters (which, I think, should be supported)?