d3.js餅圖圖例切片切換

Question

我正在研究d3.js餅圖應用程序。我正在嘗試開發一種功能，當您單擊圖例矩形時，它會切換開/關切片以及圖例矩形內的填充。

http://jsfiddle.net/Qh9X5/3136/

傳說

Rects 
         .enter() 
         .append("rect") 
         .attr("x", w - 65) 
         .attr("y", function(d, i){ return i * 20;}) 
         .attr("width", 10) 
         .attr("height", 10) 
         .style("fill", function(d, i) { 
          return methods.color(i); 
         })       
         .style("stroke", function(d, i) { 
          return methods.color(i); 
         }) 
         .on('click', function(d, i){ 
          onLegendClick(d, i); 
         }) 

Answer 1

這裏是來解決問題的一種方法：在你的代碼中使用key functions需要被

一個變化，使得d過濾的數據匹配到相應的DOM節點。標籤似乎是您的數據集中的一個合適的關鍵。

只需使用：的

.data(this.piedata, function(d) { return d.data.label}); 

代替

.data(this.piedata); 

然後，在你OnLegendClick功能，要選擇所有傳奇的正確，而且所有的SVG弧線與點擊的元素匹配。

工作流程是：

1. 選擇DOM元素
2. 匹配與選擇的數據
3. 應用更改

這裏是如何做到這一點：

function onLegendClick(dt){ 
    d3.selectAll('rect').data([dt], function(d) { return d.data.label}).style("opacity", function(d) {return Math.abs(1-d3.select(this).style("opacity"))}) 
    d3.selectAll('.pie').data([dt], function(d) { return d.data.label}).style("opacity", function(d) {return Math.abs(1-d3.select(this).style("opacity"))}) 
}  

我讓你調整「切換」f eature。除了弧線之外，您還可能想要更改文字，爲此可以使用其他選擇。

更新了jsfiddle：http://jsfiddle.net/Qh9X5/3138/