DJ3S-在正投影中旋转时去除了刻度 [英] DJ3S - Graticule removed when rotation is done in orthographic projection

问题描述

我正在使用D3JS正交投影将世界视为一个球体，并且在所有对象下都添加了方格线.一切都很好，但是当我添加拖动机制以允许旋转时，在事件处理过程中将除去刻度.

I am using D3JS orthographic projection to see the world as a sphere and I have added graticule under all the coutries. Everything is fine but when I add drag mecanism to allow rotation the graticule are removed during event handling.

这是核心代码:

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

This code does not work and can be see live here : http://www.datavis.fr/d3js/map-world-temperature/fullscreenBad.html

这是可行的(每次旋转完成后，我都会删除并添加刻度): http://www.datavis.fr/d3js/map-world-temperature/fullscreen.html

This one is working (I remove and add the graticule each time a rotation is done) : http://www.datavis.fr/d3js/map-world-temperature/fullscreen.html

感谢您的帮助.

推荐答案

您绝对不需要再次移除并绘制所有标线.

You definitely don't need to remove and draw all graticule again.

您需要在拖动时对其进行更新.

You need to update it on drag.

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

在拖动时，您也会以错误的方式更新国家/地区路径:

And also on drag you updating the country path in a wrong way:

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

这样做(仅更新国家/地区并非全部路径)

do like this (only update country not all path)

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

工作代码此处

这篇关于DJ3S-在正投影中旋转时去除了刻度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！