Question

我是这样的新手，但我正在尝试创建一个圆环图，其中的部分在单击时缩放得更大，然后当单击不同的部分时，第一部分返回到原始尺寸，新部分缩放更大。 / p>

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

这是我的代码：

 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/

Answer 1

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

我创建了一个示例，通过为每个扇区和文本标签分配一个类来实现您正在寻找的内容，并使用这些类来执行＆＃34;隐藏＆＃34;动画：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");

Answer 2

删除mouseOut函数并在应用变换onClick之前重置整个集变换和属性更改，同时将图表集分离为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/

RaphaëlDonut图表点击并取消选中部分

2 个答案: