放大/缩小时，在地图上保持D3对象大小不变 [英] Keep D3 objects size constant on Map while zoom in/out

问题描述

我关注的是 http://bl.ocks.org/d3noob/raw / 5193723 /

示例中绘制的圆圈在放大时会增大。我无法弄清楚圆圈大小可以保持相同的方式。

The cirles drawn in the example increases in size when zoomed-in. I am not able to figure out a way in which the circles' size can be kept same.

任何想法？

Edit1 ：关于如何保持Pie arc的任何想法半径恒定。我已经找到了将圆圈保持为恒定半径的方法，如下所示：

Edit1: Any ideas on how to keep Pie arc constant in radii. I have figured out the the way to keep circles to constant radius as below:

            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;
                    });
            });

同样我有饼图的圆弧，我希望在缩放时保持其大小：

Similarly I have arcs of pie chart, the size of which I wish to maintain at 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);

有关如何保持弧类型路径保持相同大小的任何建议吗？

Any suggestions on how to keep the arc type paths to maintain same size?

推荐答案

您必须在缩放事件处理程序中添加一些额外的处理。将圆的半径设置为其标称值（5）除以缩放系数（ zoom.scale（））。这样，当应用缩放比例时，结果将是恒定的表观大小。类似于：

You'll have to add some additional processing in the zoom event handler. Set the circle's radii to be their nominal value (5) divided by the zoom factor (zoom.scale()). That way, when the zoom scaling is applied the result will be a constant apparent size. Something like:

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)); 
    });

这篇关于放大/缩小时，在地图上保持D3对象大小不变的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！