d3逆氣泡和標籤動畫

Question

我正在尋找動畫這個圖表。 http://jsfiddle.net/NYEaX/1554/

var invisiblebubble = mask.append("circle") 
    .data(data); 

invisiblebubble 
    .attr("cx", 550) 
    .attr("cy", 250) 
    .transition() 
    .duration(900) 
    .attr("r", function(d) { 
    return d.value; 
    }); 

我的動畫面具圈 - 尋找實現對標籤的其他動畫/建議。如果他們的補間像餅圖，圓弧中的補間，淡入等等。

我確實在圓的半徑上創建了一個過渡 - 看起來像華納兄弟的結局。

var invisiblebubble = mask.append("circle") 
    .data(data); 

invisiblebubble 
    .attr("cx", 550) 
    .attr("cy", 250) 
    .transition() 
    .duration(2000) 
    .attr("r", 10) 
    .transition() 
    .duration(900) 
    .attr("r", function(d) { 
    return d.value; 
    }); 

我如何動畫其他的功能，比如我已經設法改善與此代碼逆氣泡圖標籤/指針

---

。

我必須首先爲圓圈設置一個固定的大小，然後爲其設置動畫 - 爲了標籤的目的。

function maskMaker(el){ 

       var backcolor = $(el).data("color"); 
       var backopacity = $(el).data("opacity"); 

       var height = $(el).data("height"); 
       var width = $(el).data("width"); 

       var labelName = $(el).data("label-name"); 
       var bubbleValue = $(el).data("bubble-value"); 
       var displaceLeft = $(el).data("displace-left"); 
       var displaceTop = $(el).data("displace-top"); 

       var data = [{ 
        "label": labelName, 
        "x": displaceLeft, 
        "y": displaceTop, 
        "value": bubbleValue 
       }]; 

       console.log("MASK data", data); 


       // Set the main elements for the series chart 
       var svgroot = d3.select($(el)[0]).append("svg"); 

       // filters go in defs element 
       var defs = svgroot.append("defs"); 

       var mask = defs.append("mask") 
          .attr("id", "myMask"); 

       mask.append("rect") 
        .attr("x", 0) 
        .attr("y", 0) 
        .attr("width", "100%") 
        .attr("height", "100%") 
        .style("fill", "white") 
        .style("opacity", backopacity); 


       var invisiblebubble = mask.append("circle") 
       .data(data); 


       //create a fixed bubble first     
       invisiblebubble 
        .attr("cx", "50%") 
        .attr("cy", "50%") 
        .attr("r", function(d) { 
        return d.value-20; 
        });    


       //now mask the fixed circle  
       var masker = defs.append(function() { 
        return mask.node().cloneNode(true) 
       }) 
        .attr("id", "myMaskForPointer") 
        .select("rect") 
        .style("opacity", 0.8); 


       //animate this circle 
       invisiblebubble 
        .attr("cx", "50%") 
        .attr("cy", "50%") 
        .attr("r", 10) 
        .transition() 
        .duration(900) 
        .attr("r", function(d) { 
        return d.value; 
        }); 


       //apply the rest of the chart elements 
       var svg = svgroot 
        .attr("class", "series") 
        .attr("width", "1120px") 
        .attr("height", "500px") 
        .append("g") 
        .attr("transform", "translate(0,0)") 


       var rect = svg 
        .append("rect") 
        .attr("x", 0) 
        .attr("y", 0) 
        .attr("width", "100%") 
        .attr("height", "100%") 
        .attr("mask", "url(#myMask)") 
        .style("fill", backcolor); 


        /* 
        //__labels 
        var centrallabel = svgroot.append("g") 
         .attr("class", "centrallabel") 
         .data(data); 

       centrallabel  
         .append("text") 
         .attr("text-anchor", "middle") 
         .attr("x", 550) 
         .attr("y", 250 + 10) 
         .text(function(d) { 
         return "200"; 
         }) 
         */      


        function addLabel(){ 

         //__labels 
         var labels = svgroot.append("g") 
         .attr("class", "labels") 

         //__ enter 
         var labels = labels.selectAll("text") 
         .data(data); 

         labels.enter() 
         .append("text") 
         .attr("text-anchor", "middle") 

         //__ update 
         //labels 

         .attr("x", function(d) { 
          return d.x; 
         }) 
         .attr("y", function(d) { 
          return d.y-10; 
         }) 
         .text(function(d) { 
          return d.label; 
         }) 
         .each(function(d) { 
          var bbox = this.getBBox(); 
          d.sx = d.x - bbox.width/2 - 2; 
          d.ox = d.x + bbox.width/2 + 2; 
          d.sy = d.oy = d.y + 5; 
          d.cx = 550; 
          d.cy = 250; 
         }) 
         .transition() 
         .duration(300) 

         labels 
         .transition() 
         .duration(300) 

         //__ exit 
         labels.exit().remove(); 
         //__labels      
        } 


        function addPointer(){ 
         //__pointers 
         var pointers = svgroot.append("g") 
         .attr("class", "pointers"); 


         var dots = defs.append("marker") 
          .attr("id", "circ") 
          .attr("markerWidth", 6) 
          .attr("markerHeight", 6) 
          .attr("refX", 3) 
          .attr("refY", 3);      


         var pointers = pointers.selectAll("path.pointer") 
         .data(data); 

         //__ enter 
         pointers.enter() 
         .append("path") 
         .attr("class", "pointer") 
         .style("fill", "none") 
         .attr("marker-end", "url(#circ)") 
         .attr("mask", "url(#myMaskForPointer)") 

         //__ update 
         //pointers 
         .attr("d", function(d) { 
          if (d.cx > d.ox) { 
          return "M" + d.sx + "," + d.sy + "L" + d.ox + "," + d.oy + " " + d.cx + "," + d.cy; 
          } else { 
          return "M" + d.ox + "," + d.oy + "L" + d.sx + "," + d.sy + " " + d.cx + "," + d.cy; 
          } 
         }) 
         .transition() 
         .duration(300) 

         pointers 
         .transition() 
         .duration(300) 

         //__ exit 
         pointers.exit().remove(); 
         //__pointers 
        } 

        //delay for the mask 
        setTimeout(function(){ 
         addLabel(); 
         addPointer(); 
        }, 1000); 

       } 

Answer 1

淡入可以實現這樣的：

centrallabel 
    .append("text") 
    .attr("text-anchor", "middle") 
    .attr("x", 550) 
    .style("opacity",0) 
    .attr("y", 250 + 10) 
    .text(function(d) { 
    return "200"; 
    }) 
    .transition() 
    .duration(2000) 
    .style("opacity", 1) 

至於其他動畫，你可以開始指針線關閉屏幕再過渡它是終點。或者從0開始，並將其轉換爲全尺寸。轉換/翻譯可能會有用 - 參見（https://bl.ocks.org/mbostock/1345853）