d3.js dougnut円グラフのアニメーション

Question

私は、ハイブリッド円グラ​​フとバブルチャートになるアプリケーションに取り組んでいます。 ここは単純なドーナツ円グラフの作業用アニメーションです。

http://jsfiddle.net/Qh9X5/8817/

http://jsfiddle.net/NYEaX/1487/ これは、静的なドーナツグラフである - 私は半ば弧を計算している - しかし、アニメーションを失っています。上のサンプルコードでは、arc.centroid（d）はどこで取得できますか？

var width = 960, 
    height = 500, 
    radius = Math.min(width, height)/2; 

var color = d3.scale.ordinal() 
    .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]); 

var arc = d3.svg.arc() 
    .outerRadius(radius - 60) 
    .innerRadius(radius - 70); 

var pie = d3.layout.pie() 
    .sort(null) 
    .value(function(d) { return d.value; }); 

var svg = d3.select("body").append("svg") 
    .attr("width", width) 
    .attr("height", height) 
    .append("g") 
    .attr("transform", "translate(" + width/2 + "," + height/2 + ")"); 


    var data = [ 
    { 
     "group": "<5", 
     "value": 1000, 
     "children": [ 
     { 
      "group": "<5",  
      "label": "Mel", 
      "value": 1000, 
      "totalGroupValue": 1000 
     } 
     ] 
    }, 
    { 
     "group": "5-13", 
     "value": 1000, 
     "children": [ 
     { 
      "group": "5-13",   
      "label": "Erica", 
      "value": 1000, 
      "totalGroupValue": 1000 
     } 
     ] 
    }, 
    { 
     "group": "14-17", 
     "value": 2000, 
     "children": [ 
     { 
      "group": "14-17", 
      "label": "Jessica", 
      "value": 1500, 
      "totalGroupValue": 2000 
     }, 
     { 
      "group": "14-17", 
      "label": "Jill", 
      "value": 500, 
      "totalGroupValue": 2000 
     } 
     ] 
    }, 
    { 
     "group": "18-24", 
     "value": 1300, 
     "children": [ 
     { 
      "group": "18-24", 
      "label": "Jerry", 
      "value": 500,   
      "totalGroupValue": 1300 
     }, 
     { 
      "group": "18-24", 
      "label": "Ben", 
      "value": 500, 
      "totalGroupValue": 1300 
     }, 
     { 
      "group": "18-24", 
      "label": "Billy", 
      "value": 300, 
      "totalGroupValue": 1300 
     } 
     ] 
    }, 
    { 
     "group": "25-44", 
     "value": 1000, 
     "children": [ 
     { 
      "group": "25-44", 
      "label": "Kelly", 
      "value": 1000, 
      "totalGroupValue": 1000 
     } 
     ] 
    } 
    ]; 


    var g = svg.selectAll(".arc") 
     .data(pie(data)) 
    .enter().append("g") 
     .attr("class", "arc"); 

    g.append("path") 
     .attr("d", arc) 
     .style("fill", function(d) { 
     return color(d.data.group); 
     }); 

    arc 
    .outerRadius(radius - 10) 
    .innerRadius(0); 


//create zone regions 

var zones = []; 
g.append("circle") 
    .attr("transform", function(d) { 
     zones[d.data.group] = arc.centroid(d); 
    return "translate(" + arc.centroid(d) + ")"; 
    }) 
    .attr("r", "1px") 
    .style("fill", function(d) { 
    return "black"//color(d.data.group); 
    }); 

g.append("g") 
    .attr("class", function(d,i) { 
    console.log("d", d) 
    return "bubble"+i;//color(d.data.group); 
    }) 
    .attr("transform", function(d) { 
     zones[d.data.group] = arc.centroid(d); 
    return "translate(" + arc.centroid(d) + ")"; 
    }) 
    .attr("r", "1px") 
    .style("fill", function(d) { 
    return "black"//color(d.data.group); 
    }); 


//create zone regions 


//custom bubble chart 
function makeBubbles(transform, group, radius){ 
    g.append("circle") 
    .attr("transform", function(d) { 
     return "translate("+transform+")"; 
    }) 
    .attr("r", radius) 
    .style("stroke", function(d) { 
     return "black";//color(group); 
    }) 
    .style("fill", function(d) { 
     return color(group); 
    }); 
} 


      function bubbledata(data){ 
     console.log("data", data) 
       //loop through data -- and MERGE children 
       var childs = []; 
       $.each(data, function(index, value) { 
        childs.push(value.children);      
       }); 
       var merged = data;//[].concat.apply([], childs);//flatterns multidimensional array 

       return $.extend(true, {}, {"children": merged});// return deep clone 
      } 


function setBubbleChart(width, index, data){ 

        //_create bubble 
        var diameter = width/2;//take half/width 

        var bubs = svg.select(".bubble"+index).append("g") 
          .attr("class", "bubs"); 

        bubs.attr("transform", "translate("+-diameter/2+","+-diameter/2+")"); 

        var bubble = d3.layout.pack() 
         .size([diameter, diameter]) 
         .value(function(d) { 
         return d.value; 
         }) 
         .padding(3); 

        //_create bubble 
      var data = bubbledata(data); 

         var nodes = bubble.nodes(data) 
          .filter(function(d) { 
          return !d.children; 
          }); // filter out the outer bubble 


         var bubbles = bubs.selectAll('circle') 
          .data(nodes); 


       bubbles.enter() 
        .insert("circle") 
        .attr('transform', function (d) { 
         return 'translate(' + d.x + ',' + d.y + ')'; 
        }) 
        .attr('r', function (d) { 
         return d.r; 
        }) 
        .style("fill", function (d) { 
return color(d.group); 
        }); 

       bubbles = bubbles.transition() 
        .transition() 
        .duration(250) 
        .attr('transform', function(d) { 
         return 'translate(' + d.x + ',' + d.y + ')'; 
        }) 
        .attr('r', function (d) { 
         return d.r; 
        }) 
        .ease('sine'); 

} 



//loop through data and for EACH children array paint dots. 
$.each(data, function(index, value) { 
setBubbleChart(100, index, value.children); 


});  
//custom bubble chart  


function type(d) { 
    d.value = +d.value; 
    return d; 
} 

Answer 1

私は中間弧をプロットしましたが、データの変更時に更新されていませんか？プレースホルダをアニメーション化 - 私はARC2を作成するために管理してきました

function change(data) { 


    var slice = svg.select(".slices").selectAll("path.slice") 
    .data(pie(data), key); 

    slice.enter() 
    .insert("path") 
    .style("fill", function(d) { 
     return color(d.data.label); 
    }) 
    .attr("class", "slice"); 

    slice 
    .transition().duration(1000) 
    .attrTween("d", function(d) { 
     this._current = this._current || d; 
     var interpolate = d3.interpolate(this._current, d); 
     this._current = interpolate(0); 
     return function(t) { 
     return arc(interpolate(t)); 
     }; 
    }) 

    slice.exit() 
    .remove(); 



    var placeholders = svg.select(".placeholders").selectAll("circle.placeholder") 
    .data(pie(data), key); 

    placeholders.enter() 
    .insert("circle") 
    .style("fill", function(d) { 
     return "white"; 
     //return color(d.data.label); 
    }) 
    .attr("transform", function(d) { 
     return "translate(" + arc.centroid(d) + ")"; 
    }) 
    .attr("r", "5") 
    .attr("class", "placeholder"); 

    placeholders 
    .transition().duration(1000) 

    placeholders.exit() 
    .remove(); 


}; 

---

http://jsfiddle.net/Qh9X5/10066/

。

http://jsfiddle.net/Qh9X5/10068/

var svg = d3.select("#pies") 
    .append("svg") 
    .append("g") 

svg.append("g") 
    .attr("class", "slices"); 
svg.append("g") 
    .attr("class", "placeholders"); 
svg.append("g") 
    .attr("class", "labels"); 
svg.append("g") 
    .attr("class", "lines"); 

var width = 560, 
    height = 450, 
    radius = Math.min(width, height)/2; 

var pie = d3.layout.pie() 
    .sort(null) 
    .value(function(d) { 
    return d.value; 
    }); 

var arc = d3.svg.arc() 
    .outerRadius(radius * 0.85) 
    .innerRadius(radius * 0.83); 

var arc2 = d3.svg.arc() 
    .outerRadius(radius - 10) 
    .innerRadius(0); 


var outerArc = d3.svg.arc() 
    .innerRadius(radius * 0.9) 
    .outerRadius(radius * 0.9); 

svg.attr("transform", "translate(" + width/2 + "," + height/2 + ")"); 

var key = function(d) { 
    return d.data.label; 
}; 

var color = d3.scale.ordinal() 
    .domain(["Lorem ipsum", "dolor sit", "amet", "consectetur", "adipisicing"]) 
    .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56"]); 

function randomData() { 
    var labels = color.domain(); 
    return labels.map(function(label) { 
    return { 
     label: label, 
     value: Math.random() 
    } 
    }); 
} 


console.log("randomData()", randomData()); 
change(randomData()); 

d3.select(".randomize") 
    .on("click", function() { 
    change(randomData()); 
    }); 


function change(data) { 



    var slice = svg.select(".slices").selectAll("path.slice") 
    .data(pie(data), key); 

    slice.enter() 
    .insert("path") 
    .style("fill", function(d) { 
     return color(d.data.label); 
    }) 
    .attr("class", "slice"); 

    slice 
    .transition().duration(1000) 
    .attrTween("d", function(d) { 
     this._current = this._current || d; 
     var interpolate = d3.interpolate(this._current, d); 
     this._current = interpolate(0); 
     return function(t) { 
     return arc(interpolate(t)); 
     }; 
    }) 

    slice.exit() 
    .remove(); 




    var placeholders = svg.select(".placeholders").selectAll("circle.placeholder") 
    .data(pie(data), key); 

    placeholders.enter() 
    .insert("circle") 
    .style("fill", function(d) { 
     return "white"; 
    }) 
    .attr("r", "5") 
    .attr("class", "placeholder"); 


    placeholders 
    .transition().duration(1000) 
    .attr("transform", function(d) { 
     console.log("arc.centroid(d)", arc2.centroid(d)) 
     return "translate(" + arc2.centroid(d) + ")"; 
    }) 

    placeholders.exit() 
    .remove(); 



}; 

---

http://jsfiddle.net/Qh9X5/10075/

私はバブルチャートで円グラフをマージするために管理している - データ・セットが変更された場合 - アニメーションは安定していなければなりません。

var svg = d3.select("#pies") 
    .append("svg") 
    .append("g") 

svg.append("g") 
    .attr("class", "slices"); 
svg.append("g") 
    .attr("class", "placeholders"); 


var width = 560, 
    height = 450, 
    radius = Math.min(width, height)/2; 

var pie = d3.layout.pie() 
    .sort(null) 
    .value(function(d) { 
    return d.value; 
    }); 

var arc = d3.svg.arc() 
    .outerRadius(radius * 0.85) 
    .innerRadius(radius * 0.83); 

var arc2 = d3.svg.arc() 
    .outerRadius(radius - 10) 
    .innerRadius(0); 

var outerArc = d3.svg.arc() 
    .innerRadius(radius * 0.9) 
    .outerRadius(radius * 0.9); 

svg.attr("transform", "translate(" + width/2 + "," + height/2 + ")"); 


function colores_google(n) { 
    var colores_g = ["#f7b363", "#448875", "#c12f39", "#2b2d39", "#f8dd2f"]; 
    return colores_g[n % colores_g.length]; 
} 



var data = [{ 
    "group": "<5", 
    "value": 1000, 
    "children": [{ 
    "group": "<5", 
    "label": "Mel", 
    "value": 1000, 
    "totalGroupValue": 1000 
    }] 
}, { 
    "group": "5-13", 
    "value": 1000, 
    "children": [{ 
    "group": "5-13", 
    "label": "Erica", 
    "value": 1000, 
    "totalGroupValue": 1000 
    }] 
}, { 
    "group": "14-17", 
    "value": 2000, 
    "children": [{ 
    "group": "14-17", 
    "label": "Jessica", 
    "value": 1500, 
    "totalGroupValue": 2000 
    }, { 
    "group": "14-17", 
    "label": "Jill", 
    "value": 500, 
    "totalGroupValue": 2000 
    }] 
}, { 
    "group": "18-24", 
    "value": 1300, 
    "children": [{ 
    "group": "18-24", 
    "label": "Jerry", 
    "value": 500, 
    "totalGroupValue": 1300 
    }, { 
    "group": "18-24", 
    "label": "Ben", 
    "value": 500, 
    "totalGroupValue": 1300 
    }, { 
    "group": "18-24", 
    "label": "Billy", 
    "value": 300, 
    "totalGroupValue": 1300 
    }] 
}, { 
    "group": "25-44", 
    "value": 1000, 
    "children": [{ 
    "group": "25-44", 
    "label": "Kelly", 
    "value": 1000, 
    "totalGroupValue": 1000 
    }] 
}]; 

$.each(data, function(index, value) { 
    value["groupid"] = index; 
    $.each(value.children, function(i, v) { 
    v["groupid"] = index; 
    }); 
}); 

//slices 
var slice = svg.select(".slices").selectAll("path.slice") 
    .data(pie(data)); 

slice.enter() 
    .insert("path") 
    .style("fill", function(d) { 
    return colores_google(d.data.groupid); 
    }) 
    .attr("class", "slice"); 

slice 
    .transition().duration(1000) 
    .attrTween("d", function(d) { 
    this._current = this._current || d; 
    var interpolate = d3.interpolate(this._current, d); 
    this._current = interpolate(0); 
    return function(t) { 
     return arc(interpolate(t)); 
    }; 
    }) 

slice.exit() 
    .remove(); 
//slices 



//placeholder bubbles 
var placeholders = svg.select(".placeholders").selectAll("g.placeholder") 
    .data(pie(data)); 

placeholders.enter() 
    .insert("g") 
    .attr("class", function(d, i) { 
    return "placeholder place" + i; 
    }); 

placeholders 
    .transition().duration(1000) 
    .attr("transform", function(d) { 
    return "translate(" + arc2.centroid(d) + ")"; 
    }) 

placeholders.exit() 
    .remove(); 
//placeholder bubbles 




//bubbles 
function bubbledata(data) { 
    //loop through data -- and MERGE children 
    var childs = []; 
    $.each(data, function(index, value) { 
    childs.push(value.children); 
    }); 

    return $.extend(true, {}, { 
    "children": data 
    }); // return deep clone 
} 


function setBubbleChart(width, index, data) { 

    //_create bubble 
    var diameter = width/2; //take half/width 

    var bubs = svg.select(".place" + index).append("g") 
    .attr("class", "bubs"); 

    bubs.attr("transform", "translate(" + -diameter/2 + "," + -diameter/2 + ")"); 

    var bubble = d3.layout.pack() 
    .size([diameter, diameter]) 
    .value(function(d) { 
     return d.value; 
    }) 
    .padding(3); 

    //_create bubble 
    var data = bubbledata(data); 

    var nodes = bubble.nodes(data) 
    .filter(function(d) { 
     return !d.children; 
    }); // filter out the outer bubble 


    var bubbles = bubs.selectAll('circle') 
    .data(nodes); 

    bubbles.enter() 
    .insert("circle") 
    .attr('transform', function(d) { 
     return 'translate(' + d.x + ',' + d.y + ')'; 
    }) 
    .attr('r', function(d) { 
     return d.r; 
    }) 
    .style("fill", function(d) { 
     return colores_google(d.groupid); 
    }); 

    bubbles = bubbles.transition() 
    .transition() 
    .duration(250) 
    .attr('transform', function(d) { 
     return 'translate(' + d.x + ',' + d.y + ')'; 
    }) 
    .attr('r', function(d) { 
     return d.r; 
    }) 
    .ease('sine'); 

} 

//loop through data and for EACH children array paint dots. 
$.each(data, function(index, value) { 
    setBubbleChart(100, index, value.children); 
}); 
//custom bubble chart