2

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

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

这是我的代码：

 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/70twee1o/1/

4

2 回答 2

0

删除 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/

于 2014-12-16T16:48:26.733 回答
0

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

我创建了一个示例，它通过为每个扇区和文本标签分配一个类来实现您正在寻找的内容，并使用这些类来执行“隐藏”动画：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");
于 2014-12-16T16:07:03.163 回答