d3.js饼图图例切片切换

时间:2014-09-29 15:35:34

标签: javascript jquery d3.js

我正在研究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);
                        })

1 个答案:

答案 0 :(得分:1)

这是解决问题的唯一方法:

代码中需要进行一项更改是使用key functions,以便d3将过滤后的数据与相应的DOM节点进行匹配。标签似乎是数据集中的正确密钥。

只需使用:

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

而不是

.data(this.piedata);

然后,在OnLegendClick函数中,您要选择所有图例的矩形以及与所单击元素匹配的所有svg弧。

工作流程是:

  1. 选择DOM元素
  2. 与所选数据匹配
  3. 应用更改
  4. 以下是如何操作:

    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"))})
    }    
    

    我让你调整"切换"特征。您可能还想更改除弧之外的文本,为此使用另一个选择。

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