d3.js畫圓與悸動外線

Question

我想創建類似這種 http://demo.joostkiens.com/het-parool-4g/

凡繪製圓有外線向外悸動。

這是我的演示到目前爲止。

http://jsfiddle.net/NYEaX/95/

我曾與一些虛擬數據繪製的圓圈。頂部是紅色圓圈。我如何調用動畫並使其更加生動，例如。警報等級。

我不確定如何創建具有半徑蹦過去的周長，然後淡出循環動畫 - 基於警報等級門檻有這個品種

在理想情況下需要在發生這樣的轉變一個循環，http://jsfiddle.net/pnavarrc/udMUx/

var speedLineGroup = sampleSVG.append("g") 
             .attr("class", "speedlines"); 

          speedLineGroup.selectAll("circle.dl-speed-static") 
           .data(dataset) 
           .enter().append("circle") 
           .style("stroke", "red") 
           .style("fill", "black") 
           .attr("r", function(d){ 
            return d.value; 
           }) 
           .attr("cx", function(d){ 
            return d.xcoord; 
           }) 
           .attr("cy", function(d){ 
            return d.ycoord; 
           }) 
           .attr("class", "dl-speed-static") 
           .attr("stroke-opacity", function (e) { 
            return 1; 
            //return var 
           }) 
           .attr("fill-opacity", function (e) { 
            return 1; 
            //return var 
           }) 
           .transition() 
           .ease("linear") 
           .duration(200) 
           .attr("r", function (e) { 
            return 1; 
            //return var 
           }) 

---

我已經在合併後的想法。我已將戒指創作置於其自己的功能中，並取消了超時時間。我也開始嘗試勾住每個標記的報警閾值。

http://jsfiddle.net/NYEaX/102/

但應用程序似乎仍延遲/越野車 - 作爲最好的例子不是很清楚。這怎麼可能進一步改善。一些警報數量很低 - 但這種方法會導致戒指過早跳動或閃爍。它幾乎就像我需要將該值反轉爲低警報 - 創建較慢的響應。

  function makeRings() { 
       var datapoints = circleGroup.selectAll("circle"); 
       var radius = 1; 

        function myTransition(circleData){ 

         var transition = d3.select(this).transition(); 

          speedLineGroup.append("circle") 
           .attr({"class": "ring", 
            "fill":"red", 
            "stroke":"red", 
            "cx": circleData.xcoord, 
            "cy": circleData.ycoord, 
            "r":radius, 
            "opacity": 0.4, 
            "fill-opacity":0.1 
            }) 
           .transition() 
           .duration(function(){     
           return circleData.alarmLevel*100; 
           }) 
           .attr("r", radius + 100) 
           .attr("opacity", 0) 
           .remove(); 


         transition.each('end', myTransition); 
        } 

       datapoints.each(myTransition); 
      } 

---

這是最新的代碼..

makeRings() 

var t = window.setInterval(makeRings, 10000); 

       function makeRings() { 
         var datapoints = mapSVG.selectAll("circle.location"); 
         var radius = 1; 

          function myTransition(circleData){ 

           console.log("circleData", circleData); 

           var transition = d3.select(this).transition(); 

            speedLineGroup.append("circle") 
             .attr({"class": "ring", 
              "fill":"red", 
              "stroke":"red", 
              "cx": circleData.x * ratio, 
              "cy": circleData.y * ratio, 
              "r":radius, 
              "opacity": 0.4, 
              "fill-opacity":0.1 
              }) 
             .transition() 
             .duration(function(){     
             return (circleData.redSum * 100); 
             }) 
             .attr("r", radius + 30) 
             .attr("opacity", 0) 
             .remove(); 


           transition.each('end', myTransition); 
          } 

         datapoints.each(myTransition); 
        } 

Answer 1

的例子中，你鏈接到精縮代碼使用，所以這是一個有點痛找出他們在做什麼。但是，如果您只是觀察DOM檢查器中的更改，則會看到每個圓環都是一個新的圓圈，它被添加，增大並朝向外，然後被刪除。不同的點在環消失之前有多大變化（因此一次可以看到多少個環，因爲它們都以相同的速度增長）。

的辦法我想借此使這個繼續下去是：

1. 使用「的setInterval」來調用定期的功能（例如，每天一次或每秒兩次），這將創建一個新的環圍繞每個數據圈。

2. 創建使用您的數據圈子的.each()呼叫環，但是它們添加到不同的<g>元素，和/或不同類的名稱，以便有環和數據點之間不存在混淆。

3. 將環的初始半徑設置爲與數據點相同，但是立即開始對其進行轉換。使轉換的持續時間成爲相關數據圓的「強度」數據值的函數，並使最終半徑成爲該數據值的函數。同時將不透明度轉換爲0.

4. 爲圓環.remove()創建過渡的最後一行，以便每個圓環在完成展開後自行移除。

Basic代碼：

window.setInterval(makeRings, 1000); 

function makeRings() { 

    datapoints.each(function(circleData){ 
     //datapoints is your d3 selection of circle elements 

    speedLineGroup.append("circle") 
     .attr({"class": "ring", 
      "fill":"red", //or use CSS to set fill and stroke styles 
      "stroke":"red", 
      "cx": circleData.xCoord, 
      "cy": circleData.yCoord, 
       //position according to this circle's position 
      "r":radius, //starting radius, 
         //set according to the radius used for data points 
      "opacity": 0.8, //starting opacity 
      "fill-opacity":0.5 //fill will always be half of the overall opacity 
      }) 
     .transition() 
     .duration(intensityTimeScale(circleData.intensity)) 
      //Use an appropriate linear scale to set the time it takes for 
      //the circles to expand to their maximum radius. 
      //Note that you *don't* use function(d){}, since we're using the data 
      //passed to the .each function from the data point, not data 
      //attached to the ring 
     .attr("r", radius + intensityRadiusScale(circleData.intensity)) 
      //transition radius 
      //again, create an appropriate linear scale 
     .attr("opacity", 0) //transition opacity 
     .remove(); //remove when transition is complete 

    }); 
} 

因爲無論是在半徑的變化和躍遷的持續時間是所述強度值的線性函數，變化將對所有數據點的恆定速度。

Answer 2

您只需在d3中創建循環轉換即可在轉換中使用end回調。創建兩個函數，每個創建您的數據的轉換，從你的起點一個要你的終點，另一回去，並讓他們互相稱呼上完成，像這樣：

function myTransition(d){ 
    var transition = d3.select(this).transition(); 

    //Forward transition behavior goes here 
    //Probably create a new circle, expand all circles, fade out last circle 

    transition.each('end', myTransition); //This calls the backward transition 
} 

d3.select('myFlashingElement').each(myTransition); 

這將封裝所有內容，並在轉換的持續時間內保持循環。在轉換結束之前，下一個轉換將始終觸發，因此您不必擔心同步任何事情。