用圓圈d3.js拖動正交

Question

我正在嘗試用拖動創建一個地球儀（正交投影），它上面也有圓圈。

我已經能夠通過拖動創建地球，並添加圓圈。 問題是，當我拖動圓圈時，圓圈不會隨地球移動。

這是我的bl.ock，您可以在其中找到我的代碼： http ://bl.ocks.org/JulienAssouline/3caf0d6e01aa8220a8d4027cb9158d7e

我已經看過其他bl.ock示例，例如： https ://bl.ocks.org/larsvers/f8efeabf480244d59001310f70815b4e

而這個： https : //bl.ocks.org/curran/115407b42ef85b0758595d05c825b346

但我無法讓它為我工作。 他們的方法似乎與我的方法完全不同，而且我還不完全了解他們的代碼。

有人知道什么方法，或者我需要添加什么代碼嗎？

謝謝。

這是我的JavaScript代碼：

   (function(){
 var h = 600;
   var w = 900;
   var i = 0;
   var map = void 0;
  var world = void 0;
  var US = void 0;


    var margin = {
          top: 10,
          bottom: 40,
          left: 0,
          right: 30
        };


      var circleScale = d3.scaleSqrt()
        .domain([0, 4445])
        .range([0.5, 10])


    var width = w - margin.left - margin.right;
    var height = h - margin.top - margin.bottom;

  var dragging = function(d){
    var c = projection.rotate();
    projection.rotate([c[0] + d3.event.dx/6, c[1] - d3.event.dy/6])
    map.selectAll('path').attr('d', path);
   }

   var drag = d3.drag()
    .on("drag", dragging)


   var projection = d3.geoOrthographic().clipAngle(90); 
   var path = d3.geoPath().projection(projection);

   var svg = d3.select("body")
        .append("svg")
        .attr("id", "chart")
        .attr("width", w)
        .attr("height", h)

   d3.json("world.json", function(json){ 
     d3.csv("arms_transfer_2012_2016_top - arms_transfer_2012_2016_top.csv", function(error, data){


    var countries = topojson.feature(json, json.objects.countries).features
    var US = countries[168]


    map = svg.append('g').attr('class', 'boundary');
    world = map.selectAll('path').data(countries);
    US = map.selectAll('.US').data([US]);
    Circles = map.selectAll(".circles").data(data)

    console.log(countries[168])


    world.enter()
    .append("path")
    .attr("class", "boundary")
    .attr("d", path)


    US.enter()
      .append("path")
      .attr("class", "US")
      .attr("d", path)
      .style("fill", "lightyellow")
      .style("stroke", "orange")




          Circles.enter()
              .append("circle")
              .attr("class", "importer")
              .attr("r", function(d){
                return circleScale(d.Millions)
              })
              .attr("cx", function(d){
                var coords = projection([d.Longitude_imp, d.Latitude_imp])
                return coords[0];
              })
              .attr("cy", function(d){
                var coords = projection([d.Longitude_imp, d.Latitude_imp])
                return coords[1];
              })
              .style("fill", "#cd0d0e")

    svg.append("rect")
      .attr("class", "overlay")
      .attr("width", w)
      .attr("height", h)
      .call(drag)

      })

   })

  })();

Answer 1

您必須在dragging功能中更新圓的位置：

var dragging = function(d) {
    var c = projection.rotate();
    projection.rotate([c[0] + d3.event.dx / 6, c[1] - d3.event.dy / 6])
    map.selectAll('path').attr('d', path);
    map.selectAll(".circles").attr("cx", function(d) {
            var coords = projection([d.Longitude_imp, d.Latitude_imp])
            return coords[0];
        })
        .attr("cy", function(d) {
            var coords = projection([d.Longitude_imp, d.Latitude_imp])
            return coords[1];
        })
}

另外，使用正確的類別選擇它們。

關於性能，如果您不想兩次計算coords ，則可以使用each ：

var dragging = function(d) {
    var c = projection.rotate();
    projection.rotate([c[0] + d3.event.dx / 6, c[1] - d3.event.dy / 6])
    map.selectAll('path').attr('d', path);
    map.selectAll(".circles").each(function(d) {
        var coords = projection([d.Longitude_imp, d.Latitude_imp])
        d3.select(this).attr("cx", function(d) {
                return coords[0];
            })
            .attr("cy", function(d) {
                return coords[1];
            })
    })
}

這是您的bl.ocks所做的更改： http ://bl.ocks.org/anonymous/dc2d4fc810550586d40d4b1ce9088422/40c6e199a5be4e152c0bd94a13ea94eba41f004b

PS：您對地球另一端的圈子有疑問...但是，這是另一個問題，已經在此處解決了。例如，我的以下答案： https : //stackoverflow.com/a/46441983 / 5768908