Question

我正在研究d3.js饼图应用程序。我正在尝试开发一种功能，当您单击图例矩形时，它会切换切片的开/关以及图例矩形内的填充。

说明

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，以便d3将过滤后的数据与相应的DOM节点进行匹配。标签似乎是数据集中的正确密钥。

只需使用：

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

而不是

.data(this.piedata);

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

工作流程是：

选择DOM元素
与所选数据匹配
应用更改

以下是如何操作：

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

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

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

d3.js饼图图例切片切换

1 个答案: