Raphael not adding an id nor data attribute

Question

Hopefully someone has an answer because looking at the example code in the documentation and the 'Free Icons' script I just can't see how this isn't working.

My issue is I am trying to create a beanie (hat). This beanie is made up of a number of different sections which I have stored in a variable named 'beanie' like so:

beanie = {
  section1: "PATH CO-ORDINATES",
  section2: "PATH CO-ORDINATES",
  section3: "PATH CO-ORDINATES"
};

Basically the same way the 'Free Icons' are done as mentioned previously. I have then looped through all sections and created each on the paper like so:

for (var section in beanie) {
  activeSection = beanieWindow.path(beanie[section]).attr({
    'fill': '#ffffff',
    'stroke': 'none'
  })
  .data('section', beanie[section])
  .click(function () {
    makeActiveSection(this);
  })
  .hover(
    function () {
      this.attr('stroke', 'red');
    },
    function () {
      this.attr('stroke', 'none');
    }
  );
}

This this all works wonderfully, but when inspecting the paths there is no data-section attribute added - not even an 'id' attribute, which Neil mentions in his answer on Raphael, after assigning data, i am not able to get it that the id is provided by Raphael.

Not sure if I'm missing something obvious, but if I am I just can't see it :-/

Any help would be much appreciated!

Thanks in advance, Mat