Сохраняйте постоянный размер объектов 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);

Любые предложения о том, как сохранить пути типа дуги, чтобы сохранить одинаковый размер?


javascript d3.js topojson
person Mohitt    schedule 13.12.2014    source источник
comment
Масштабируйте проекцию, а не SVG. Это сохранит все остальное в вашем SVG таким же. См. пример на bl.ocks.org/mbostock/2206340.   -  person Ben Lyall    schedule 17.12.2014

Ответы (1)


arrow_upward
4
arrow_downward

Вам придется добавить дополнительную обработку в обработчик событий масштабирования. Установите радиусы окружности равными их номинальному значению (5), деленному на коэффициент масштабирования (zoom.scale()). Таким образом, когда применяется масштабирование, результатом будет постоянный видимый размер. Что-то вроде:

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)); 
    });
person Stephen Thomas    schedule 14.12.2014
comment
@стефан, спасибо за ответ. На самом деле я разработал подход, который вы предложили. - person Mohitt; 14.12.2014
comment
@stephan, теперь моя проблема не ограничивается кругами, а дугами пирога. См. Отредактированный раздел моего вопроса. - person Mohitt; 14.12.2014