CODEWITHSUNDEEP
javascriptjqueryraphaeld3.js
locorecto
locorecto

Reputation: 1203

Working with d3.js and raphael

I am having a very hard time since there is not much documentation on d34raphael tool.

I am trying to reproduce this example from d3.js: http://bl.ocks.org/d/1249394/ using raphael. The idea is to be able to run this into ie8 which doesn't support svg.

My biggest concern is replacing the "g" svg nodes with raphael code.

For example how to convert these statemetns into d34raphael:

var node = vis.selectAll("g.node")
   .data(nodes, function(d) { return d.id || (d.id = ++i); });

or

var nodeEnter = node.enter().append("g")
    .attr("class", "node")
    .attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; })
    .on("click", click);

I have read the documentation on d34raphael but it hasn't been useful.

Thanks for the help.

Upvotes: 2

Views: 1000

Answers (1)

Biovisualize
Biovisualize

Reputation: 2475

Raphael doesn't use the g element but has some notions of a set. d34raphael uses it directly:

paper.setStart()
...
paper.setFinish().transform(["t", margins.top, margins.left]);

But that's not very useful for a direct translation of d3 code. I suggest you flatten your data and all the logic to position your elements, instead of having your elements has children of a group.

Upvotes: 1

Related Questions