Raphael JS Pie: добавление идентификатора к фрагментам пути

Я видел, как этот вопрос задавали в группах Рафаэля Google, но после нескольких часов поиска там, а также здесь и в Google я не могу найти решение.

Я просто хотел бы иметь возможность ориентироваться на фрагменты круговой диаграммы (путь svg) с помощью jQuery, но я не могу понять, как добавить пользовательский идентификатор в теги пути - по умолчанию там нет атрибута ID:

<path fill="#764c29" stroke="none" d="M350,350L350.6911881148345,94.00093308961084A256,256,0,0,1,561.8463375189659,206.2741175716762Z" style="stroke-width: 1; stroke-linejoin: round;" stroke-width="1" stroke-linejoin="round"/>

В идеале было бы так:

<path **id="my_id"** fill="#764c29" stroke="none" d="M350,350L350.6911881148345,94.00093308961084A256,256,0,0,1,561.8463375189659,206.2741175716762Z" style="stroke-width: 1; stroke-linejoin: round;" stroke-width="1" stroke-linejoin="round"/>

У кого-нибудь есть идеи, как это может быть достигнуто?

Это код, который я использую для создания круговой диаграммы:

window.onload = function () {
var r = Raphael("holder");


var pie = r.g.piechart(350, 350, 256, [56, 104, 158, 23, 15, 6]);

pie.hover(function () {
    this.sector.stop();
    this.sector.animate({scale: [1.1, 1.1, this.cx, this.cy]}, 500, "bounce");

    }, function () {
        this.sector.animate({scale: [1, 1, this.cx, this.cy]}, 500, "bounce");
    });

};

По сути, причина, по которой мне нужно это сделать, заключается в том, что я могу создать несколько отдельных триггеров привязки для выполнения анимации масштабирования, показанной выше.

Любая помощь очень ценится.


javascript jquery pie-chart raphael
person Jamie    schedule 26.04.2011    source источник

Ответы (1)


arrow_upward
5
arrow_downward

объект круговой диаграммы предоставляет 3 способа доступа к своим секторам.

1) каждая функция

pie.each(function(sector, cover, i) {
 sector.attr({/*...*/}); //raphael
 $(sector.node).foo(); //jquery
});

2) серийный объект (для стилизации и трансформации)

var i = 0; // 0 = 56, 1 = 104, 2 = 158 …

//raphael way to hide the first sector
pie.series.items[i].attr({ opacity : 0 });  

//jquery way to hide the first sector
$(pie.series.items[i].node).hide();

где я - индекс вашего массива данных

демо: http://jsbin.com/eriqa5/2/edit

3) закрывает объект (для событий мыши и касания)

//raphael way to hover the first sector
pie.covers.items[0].hover(...);

//jquery way to hover the first sector
$(pie.covers.items[0].node).hover(...);

демо: http://jsbin.com/eriqa5/4/edit

person basecode    schedule 27.04.2011
comment
Большое спасибо за объяснение. Одна вещь, на которой я все еще застрял: использование jQuery hover, похоже, не работает для узла: $(pie.series.items[0].node).hover(function () { $('#test').hide(); }); - person Jamie; 30.04.2011
comment
Джейми, я обновил свой ответ. вы должны использовать объект обложек для событий. пожалуйста, проверьте демо jsbin.com/eriqa5/4/edit - person basecode; 01.05.2011
comment
Еще раз спасибо! Я действительно ценю твою помощь. - person Jamie; 01.05.2011
comment
Гений, я застрял на этом целую вечность - person Rich Andrews; 04.01.2012
comment
Одна вещь, которую я заметил, это то, что по какой-то причине индекс item[i] не всегда представляет индекс переданного массива. Вместо этого мне пришлось просмотреть и проверить каждый элемент [i].value.order, чтобы определить правильный. На всякий случай, если у кого-то еще есть проблемы с этим. Возможна новая версия? - person Rich Andrews; 04.01.2012