2013-10-25 169 views
3

我使用d3.js互動餅圖:用餅圖

我的餅圖有3片玩具餅圖上工作的一個切片相關聯的點擊事件。我想知道是否有可能調用一個函數,只要點擊餅圖的一部分。

回答

3
function animateFirstStep(){ 
    d3.select(this) 
     .transition()        
     .attr("d",arc1); 
     /* .attr("d", arc2) 
     .style("fill", "black"); */ 

     /* .style("stroke", "black") 
     .style("stroke-width", 1); */   
}; 
function animateSecondStep(){ 
    d3.select(this) 
     .transition() 
     .ease("elastic") 
     .duration(1500) 
     .attr("d", arc) 
     .style("fill", function(d) { return color(d.data.trName); });    
     /* .style("stroke", "white") 
     .style("stroke-width", 0); */ 
}; 
    var g = svg.selectAll(".arc") 
     .data(pie(data.HubActivity.hubWorkloadList)) 
    .enter().append("g") 
     .attr("class", "arc"); 

    g.append("path") 
     .attr("d", arc) 
     .style("fill", function(d) { return color(d.data.trName); }) 
     .on("mouseover", animateFirstStep) 
     .on("mouseout", animateSecondStep); 

我認爲這將是一些幫助......當你將鼠標懸停在任何ARC功能將被解僱鼠標就可以改變它點擊