javascript - here - leaflet setview

Mantenga el tamaño de los objetos D3 constantes en el mapa mientras hace zoom in/out

Question

Estoy siguiendo el ejemplo de http://bl.ocks.org/d3noob/raw/5193723/

Los círculos dibujados en el ejemplo aumentan de tamaño cuando se aplica el zoom. No puedo descifrar la forma en que se puede mantener el tamaño de los círculos.

¿Algunas ideas?

Edición1 : cualquier idea sobre cómo mantener el arco de Pie constante en radios. He descubierto la forma de mantener los círculos a un radio constante como el siguiente:

 g1.append("circle")
.attr("cx", 200)
.attr("cy", 200)
.attr("r", 10)
.style("fill", "red");
var zoom = d3.behavior.zoom().on("zoom", function () {
g1.selectAll("circle")
.attr("transform", "translate(" + d3.event.translate.join(",") + ")scale(" + d3.event.scale + ")")
.attr("r", function(d) {
return 10/d3.event.scale;
});
});

Del mismo modo, tengo arcos de gráfico circular, cuyo tamaño deseo mantener en el zoom:

 var r = 4;
var p = Math.PI * 2;
var arc = d3.svg.arc()
.innerRadius(r - 2)
.outerRadius(r - 1)
.startAngle(0)
.endAngle(p * d.value1);
var arc2 = d3.svg.arc()
.innerRadius(r - 3)
.outerRadius(r - 2)
.startAngle(0)
.endAngle(p * d.value2);
var projection = d3.geo.mercator()
.center([0, 5])
.scale(200)
var translate = "translate(" + projection([77, 13])[0] + ", " + projection([77, 13])[1] + ")";
g.append("path")
.attr("d", arc)
.attr("fill", "maroon")
.attr("transform", translate);
g.append("path")
.attr("d", arc2)
.attr("fill", "green")
.attr("transform", translate);

¿Alguna sugerencia sobre cómo mantener las rutas de tipo de arco para mantener el mismo tamaño?

Answer 1

Tendrá que agregar algún procesamiento adicional en el controlador de eventos de zoom. Establezca los radios del círculo como su valor nominal (5) dividido por el factor de zoom ( zoom.scale() ). De esta forma, cuando se aplique la escala del zoom, el resultado será un tamaño aparente constante. Algo como:

var zoom = d3.behavior.zoom()
.on("zoom",function() {
g.attr("transform","translate("+
d3.event.translate.join(",")+")scale("+d3.event.scale+")");
g.selectAll("circle")
.attr("d", path.projection(projection))
.attr("r", 5/zoom.scale());
g.selectAll("path")
.attr("d", path.projection(projection));
});