chart = {
var centered;
var svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
var projection = d3.geoMercator();
var path = d3.geoPath()
.projection(projection);
var states = topojson.feature(tmaps, tmaps.objects[Object.keys(tmaps.objects)[0]]);
projection.fitExtent([[space, space], [width-space, height-space]], states);
svg.selectAll("path")
.data(states.features)
.enter()
.append("path")
.attr("d", path)
.on("click", clicked)
.on("mouseenter", mouseenter)
.on("mouseleave", mouseleave);
svg.selectAll("text")
.data(states.features)
.enter()
.append("text")
.attr("transform", function(d) {
let tb=d.properties.auxiliary_ == null? path.centroid(d) :projection([d.properties.auxiliary_,d.properties.auxiliar_1]);
return "translate(" + tb + ")";
})
.attr("class", "cityname")
.attr("pointer-events", "none")
.text(function(d){
return d.properties.CityName;
});
svg
.append("path")
.datum(topojson.mesh(tmaps, tmaps.objects[Object.keys(tmaps.objects)[0]], (a, b) => a !== b))
.attr("class", "mesh")
.attr("d", path);
function clicked(event,d) {
centered = centered !== d && d;
console.log(centered);
var paths = svg.selectAll("path")
.classed("active", d => d === centered);
if(!d3.select(this).classed("active"))
{
d3.select(this)
.attr("stroke", "none")
.attr("fill","none")
.lower();
}
var t0 = projection.translate(),
s0 = projection.scale();
projection.fitExtent([[space, space], [width-space, height-space]], centered || states);
var interpolateTranslate = d3.interpolate(t0, projection.translate()),
interpolateScale = d3.interpolate(s0, projection.scale());
var interpolator = function(t) {
projection.scale(interpolateScale(t))
.translate(interpolateTranslate(t));
paths.attr("d", path);
};
d3.transition()
.duration(750)
.tween("projection", function() {
return interpolator;
});
d3.selectAll(".cityname")
.transition()
.duration(750)
.attr("transform", function(d) {
let tb=d.properties.auxiliary_ == null? path.centroid(d) :projection([d.properties.auxiliary_,d.properties.auxiliar_1]);
return "translate(" + tb + ")";
})
}
function mouseenter(d) {
d3.select(this)
.attr("fill","none")
.attr("stroke", 'black')
.raise();
d3.selectAll(".cityname")
.raise();
}
function mouseleave(d) {
if(!d3.select(this).classed("active"))
{
d3.select(this)
.attr("stroke", "none")
.attr("fill","none")
.lower();
}
}
return svg.node();
}