（）の角度（）

Question

私は、この例から「パルス」効果再作成しようとしている：私はする必要が...回転地球上

https://anthonyskelton.com/2016/d3-js-earthquake-visualizations/ 

をd3.geo.circle（）を使用して、適切なクリッピングを管理するパス（svg円ではなく）を生成します。

私は他の属性を推移することができますが、推測していますが、各サークルのパスをトゥイーンする必要があります...どこから始めるべきか分かりません... d3.geo.circle（）を使用する例はほとんどなく、すべて静的です。

ありがとうございました！

Answer 1

この質問への解決策関連する質問追及の方法で来た：。）最初のステップは、（d3.geo.pathを理解した D3: Accessing bound data after using .datum()

をpointRadius（）と渡す機能を作成します iは.ATTR（ 'D'、F（D）{}）

パラメータには未使用のBでありますutはプレースホルダーとして機能し、半径はrです。

pointPath（）関数は更新（）と再描画（）機能の他の場所で使用されているので、それは既にバインドされたデータ中に存在することができるRADIUS属性を探し。

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

    // var pointPath = function(d, i, data, r) { // d3v4 adds extra param 
    var pointPath = function(d, i, r) { 
    if (d.properties && d.properties.radius != undefined) { 
     r = r || d.properties.radius; 
    } 
    r = r || 1.5; 
    var coords = [d.geometry.coordinates[0], d.geometry.coordinates[1]]; 
    var pr = geoPath.pointRadius(globe.scale()/100 * r); 
    return pr({ type: "Point", coordinates: coords }) 
    } 

アニメーションは、これが回転する地球上に発生しているので、私はリターン'M0,0'を追加する必要がありました.attrTweenを（）

pulse = function() { 
    surface.selectAll('.pulse-circle') 
     .attr("d", function(d) { return pointPath(d, 0, 0); }) 
     .style("fill-opacity", 1) 
     .transition() 
     .delay(function(d, i) { return i * 200; }) 
     .duration(3000) 
     .style("fill-opacity", 0) 
     .attrTween("d", function(d) { 
      rinterp = d3.interpolate(0, 10); 
      var fn = function(t) { 
      d.r = rinterp(t); 
      return pointPath(d, 0, d.r) || 'M0,0'; 
      }; 
      return fn; 
     }); 
    } 

使用して、その後可能でしたif pointPath（）は、コンソールエラーを回避するために、未定義で戻されました。