Сохраняйте постоянный размер объектов D3 на карте при увеличении / уменьшении
Я следую примеру отhttp://bl.ocks.org/d3noob/raw/5193723/
Нарисованные в этом примере круги увеличиваются в размерах при увеличении. Я не могу понять, каким образом размер кружков может быть одинаковым.
Есть идеи?
Edit1Любые идеи о том, как сохранить постоянную длину дуги в радиусах. Я выяснил способ держать круги с постоянным радиусом, как показано ниже:
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;
});
});
Точно так же у меня есть дуги круговой диаграммы, размер которой я хочу сохранить при увеличении:
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);
Любые предложения о том, как сохранить пути типа дуги, чтобы сохранить тот же размер?