लोड

Question

पर डी 3 डोनट चार्ट एनिमेटिंग मेरे पास इसके अंदर पांच अलग-अलग आर्क के साथ एक डोनट चार्ट है। डेटा अपडेट नहीं किया जाएगा, लेकिन चयनित पृष्ठ पर शुरू होने पर पृष्ठ लोड होने पर पूरे ग्राफ़ को सर्कल के रूप में खींचा जा रहा है (मेरे मामले 1.1 * पीआई में)। http://jsfiddle.net/Nw62g/

var data = [ 
    {name: "one", value: 10375}, 
    {name: "two", value: 7615}, 
    {name: "three", value: 832}, 
    {name: "four", value: 516}, 
    {name: "five", value: 491} 
]; 

var margin = {top: 20, right: 20, bottom: 20, left: 20}; 
    width = 400 - margin.left - margin.right; 
    height = width - margin.top - margin.bottom; 

var chart = d3.select("body") 
    .append('svg') 
    .attr("width", width + margin.left + margin.right) 
    .attr("height", height + margin.top + margin.bottom) 
    .append("g") 
    .attr("transform", "translate(" + ((width/2)+margin.left) + "," + 
             ((height/2)+margin.top) + ")"); 

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

var color = d3.scale.ordinal() 
    .range(["#3399FF", "#5DAEF8", "#86C3FA", "#ADD6FB", "#D6EBFD"]); 

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

var pie = d3.layout.pie() 
    .sort(null) 
    .startAngle(1.1*Math.PI) 
    .endAngle(3.1*Math.PI) 
    .value(function(d) { return d.value; }); 

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

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

मैं इस परिणाम को प्राप्त करने के बारे में जाना होगा: यहाँ ग्राफ के jsfiddle है?

Answer 1

आप एक विशेषता ट्वीन के साथ ऐसा कर सकते हैं:

.attrTween('d', function(d) { 
    var i = d3.interpolate(d.startAngle+0.1, d.endAngle); 
    return function(t) { 
     d.endAngle = i(t); 
    return arc(d); 
    } 
}); 

यह शुरू से ही अंत कोण करने के लिए खंड एनिमेट। पूरे चक्र भर में ऐसा करने के लिए, आप देरी संक्रमण का उपयोग कर सकते हैं:

.transition().delay(function(d, i) { return i * 500; }).duration(500) 

पूरा उदाहरण here। आप अपनी पसंद के लिए प्रारंभ खंड, अवधि, आदि समायोजित कर सकते हैं।