zhmap_bs = {
const geoGenerator = d3.geoPath().projection(projection);
const svg = d3
.select(DOM.svg(width, height))
.attr('id', 'ditu')
.style("width", "100%")
.style("height", "auto");
const zoom = d3
.zoom()
.scaleExtent([1, 300])
.translateExtent([[0, 0], [width, height]])
.on("zoom", event => {
const t = event.transform;
layers.attr("transform", t);
});
const layers = svg.append('g').attr('class', 'layers');
const fond = layers
.append('rect')
.attr('x', 0)
.attr('y', 0)
.attr('height', height)
.attr('width', width)
.attr('stroke', 'rgba(255,255,255,1)')
.attr('fill', 'rgba(255,255,255,1)')
.on("mousemove", function(event, d) {
});
const rive = layers.append('g').attr("id", "rivers");
const rivers = function() {
rive
.selectAll('path')
.data(riviere.features)
.enter()
.append("path")
.attr("stroke-width", 0.1)
.attr("class", "rivers")
.attr("stroke", "blue")
.attr("fill", "white")
.attr("d", geoGenerator);
};
rivers();
svg
.append('text')
.attr('x', 20)
.attr('y', height - 10)
.append('tspan')
.attr('id', 'coo')
.attr("font-size", "12");
layers.call(zoom);
return svg.node();
}