Question

我正在使用D3JS正交投影将世界视为一个球体，并且我在所有国家都添加了经纬网。一切都很好但是当我添加拖动机制以允许旋转时，在事件处理过程中会删除刻度。

以下是核心代码：

var width = 1000,
    height = 1000;

    var projection = d3.geo.orthographic()
        .scale(475)
        .translate([width / 2, height / 2])
        .clipAngle(90)
        .precision(.1)
        .rotate([0,0,0]);

    var path = d3.geo.path()
        .projection(projection);

    var graticule = d3.geo.graticule();

    var svg = d3.select("#map").append("svg")
        .attr("id", "world")
        .attr("width", width)
        .attr("height", height);

    // Append all meridians and parallels
    svg.append("path")
        .datum(graticule)
        .attr("class", "graticule")
        .attr("d", path);

    d3.json("world-countries.json", function(collection) {
        var countries = svg.selectAll("path")
            .data(collection.features)
            .enter().append("path")
            .attr("d", path)
            .attr("class", "country")
            .attr("id", function(d) {return d.id;});
   });

这是旋转：

   var λ = d3.scale.linear()
        .domain([0, width])
        .range([-180, 180]);

    var φ = d3.scale.linear()
        .domain([0, height])
        .range([90, -90]);

    var drag = d3.behavior.drag().origin(function() {
        var r = projection.rotate();
        return {
            x: λ.invert(r[0]),
            y: φ.invert(r[1])
        };
    }).on("drag", function() {
        projection.rotate([λ(d3.event.x), φ(d3.event.y)]);
        svg.selectAll("path").attr("d", path);
    });

    svg.call(drag);

此代码不起作用，可以在此处查看：http://www.datavis.fr/d3js/map-world-temperature/fullscreenBad.html

这个工作正常（每次轮换完成后我会删除并添加刻度）：http://www.datavis.fr/d3js/map-world-temperature/fullscreen.html

感谢您的帮助。

Answer 1

你绝对不需要再次删除和绘制所有刻度。

您需要在拖动时更新它。

svg.selectAll(".graticule") //get all graticule
    .datum(graticule)
    .attr("d", path);//update the path

并且还拖动您以错误的方式更新国家/地区路径：

svg.selectAll("path").attr("d", path);//this updates all the paths country +graticule which is wrong

这样做（仅更新国家并非所有路径）

svg.selectAll(".country").attr("d", path); //only update country

工作代码here

DJ3S - 在正投影中完成旋转时删除了经纬网

1 个答案: