using d3 and Raphaël together

using d3 with Raphaël for rendering

d3 library is described as set of functions that helps you make better use of the standards.

The idea is you know for example svg and you have some data and you use d3 to make it easier to create and mess around with svg elements depending on the data. D3 can mess around not just with svg it helps setting attributes on for example html.

Or it can let you call your own JavaScript function.But if you write something for svg it may not work on a browser that does not support it.On the other hand there is Raphaël a library that has api for manipulating vector graphics across browsers.

So here is hello world example on how to use d3 with Raphaël with no extra code. D3 will be used for its data functions and Raphaël will be used to render it all.

Instead of using data and d3 to create svg elements, data and d3 can be used with Raphaël to render what is needed.

var r = Raphael('holder',1500,2000);
d3.select("#holder").select(function(){
return ; //this is needed so that first data element would not bind to holder
}).data([
{exampleText:'text2'},
{exampleText:'text1'},
]).enter().call(function(ii){
//ii[0] array of elements
_.each(ii[0],function(i){
// for each element render it with Raphaël
///this is just some code that uses Raphaël to render elements
var el = i.__data__;
r.setStart();
rect = r.rect(rx,ry,uW*elW,height).attr({
fill:Raphael.getColor(),
stroke:Raphael.getColor(),
'fill-opacity':0,
'stroke-width':2
});
rect.attr({title:el.comment});
var tel=r.text(rx+1+uW*elW/2,ry+1+fH/2,el.exampleText);
if(rx>=16*uW){
rx=10;
ry+=51;
}
r.setFinish();
///end of just some code that used Raphaël to render elements
});

});

Leave a Comment