Description
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,
]);