How to add ID to Raphael JS element on creation

Question

I am working on the below demo. Why am I not able to add id sample to the object? I am trying to control the element style through css but it is not working

var paper = Raphael("container", 500, 300); 
var dot = paper.circle(50, 50, 30).attr({ 
stroke: "#000", 
"stroke-width": 5 
}).data("id", "sample"); 

#sample{
  fill:red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<div id="container"></div>

Answer 1

The problem is data() doesn't refer to svg attributes on an element, but custom data on a Raphael element, that it can access.

If you want to set the id attribute, you would need to try one of the following...

set the 'id' within the attr({}) definition you are using (however, iirc some versions of Raphael don't work with that), if not you would need to do

dot.attr({ 'id', 'sample' }); // or try the following 

dot.node.setAttribute('id', 'sample'); // or 

dot.node.id = 'sample';