拉斐尔圆环图单击和取消单击部分

Raphaël Donut chart click and unclick sections

本文关键字：取消 单击部 单击 圆环图      更新时间：2023-09-26
我是新手，

但我正在尝试创建一个圆环图，该图具有单击时缩放更大的部分，然后单击其他部分时，第一部分将恢复为原始大小，新部分缩放得更大。

我

有图表和点击缩放，但现在我只能通过鼠标退出让该部分恢复到原始大小。

这是我的代码：

 p.click(function () {
            p.stop().animate({transform: "s1.1 1.1 " + cx + " " + cy}, ms, "elastic");
            txt.stop().animate({opacity: 1}, ms, "elastic");
        }).mouseout(function () {
            p.stop().animate({transform: ""}, ms, "elastic");
            txt.stop().animate({opacity: 0}, ms);
        });

小提琴：http://jsfiddle.net/dll416/70twey1o/1/

重要的是能够从单击侦听器功能中选择所有其他扇区和文本标签。

我创建了一个示例，该示例通过为每个扇区和文本标签分配一个类来实现您要查找的内容，并使用这些类来执行"隐藏"动画： http://jsfiddle.net/8opkfpxs/4/

设置类： 

p.node.setAttribute('class', 'sector');
txt.node.setAttribute('class', 'sectorTxt');

单击扇区时访问类：

        p.click(function (e) {
            donut.forEach(function(element) {
                var className = element.node.getAttribute('class');
                if(className === 'sector') {
                    element.stop().animate({transform: ""}, ms, "elastic");   
                }
                else if(className === 'sectorTxt') {
                    element.stop().animate({opacity: 0}, ms);   
                }
            });
            p.stop().animate({transform: "s1.1 1.1 " + cx + " " + cy}, ms, "elastic");
            txt.stop().animate({opacity: 1}, ms, "elastic");                    
        });

您还需要将 Raphael 上下文存储在变量中（donut在上面的示例中），以便能够在点击侦听器中使用 forEach 函数。

donut = Raphael("holder", 700, 700).donutChart(350, 350, 200, 50, values, labels, "#fff");

删除 mouseOut 函数，在应用转换之前单击重置整个集合转换和属性更改，还将图表集分成 2。我还建议您在数组中绘制每个图表。

我刚刚更改了这些行：

chartTxt = this.set(),
chart = this.set();

和

p.click(function () {
    chart.transform("");
    chartTxt.attr({opacity: 0});
    this.stop().animate({transform: "s1.1 1.1 " + cx + " " + cy}, ms, "elastic");
    txt.stop().animate({opacity: 1}, ms, "elastic");
});

和

chart.push(p);
chartTxt.push(txt);

http://jsfiddle.net/crockz/m4tcr4tg/

相关文章：