Question

我正在使用topojson和D3来创建地图。在地图上我做了以下绘制位置。但是当你放大地图时，我希望.place圆圈在缩放时变小。

物件

s = 4000;

zoom = d3.behavior.zoom()
    .translate(projection.translate())
    .scale(projection.scale())
    .scaleExtent([s, s * 4])
    .on("zoom", zoommove);

缩放

topGroup = map.append('g').attr('id', 'mapGroup');

topGroup.selectAll(".place")
    .data(topojson.feature(mapData, transformedPlotData).features)
    .enter()
    .append("circle")
    .attr('cx', function(d) { return path.centroid(d)[0] })
    .attr('cy', function(d) { return path.centroid(d)[1] })
    .attr("r", 4);

绘制地点：

function zoommove() {

    var t1 = projection.translate(),
        t2 = d3.event.translate,
        t = [t2[0]-t1[0], t2[1]-t1[1]];

    map.attr("transform",
        "translate("+t+") " +
        "scale("+(d3.event.scale/s)+")"
    );

}

缩放

main.mm:

#include "stdio.h"
#include "boost/lockfree/queue.hpp"

int main(int argc, char * argv[]) {
    printf("Test1 in\n");
    boost::lockfree::queue<int*> q(100);
    printf("Test1 out\n");
    return 0;
}

全部谢谢

Answer 1

在缩放功能中，根据缩放比例设置圆圈的大小：

.attr("r", 4/zoom.scale());

这样的事情：

function zoommove() {

 var t1 = projection.translate(),
    t2 = d3.event.translate,
    t = [t2[0]-t1[0], t2[1]-t1[1]];

 map.attr("transform",
    "translate("+t+") " +
    "scale("+(d3.event.scale/s)+")"
  );

topGroup.selectAll("circle")
    .attr("r", 4/zoom.scale());

}

D3 Scale SVG儿童

1 个答案: