webmonarch / d34raphael Goto Github PK

I haven't been a good steward to this project. If anyone would like to take it over, please ping me.

I think we can simulate the "g" element. In append if we treat "g" as a special case, we could return a special D3 group selection which is basically a Raphael set. If a transformation is applied to the group, it will apply it to every element in the set. Likewise, it will store the transformation string and apply it to all elements that are "appended" to it. This should be a pretty close simulation to actual SVG group elements except they can't be "selected" and directly apply all attributes to the elements in the set (unless we limit it to transformations).

Let me know your thoughts on this and I can probably start working on it.

it is giving error that data is undefined. i think problem is with square brackets

It should mirror the d3.svg.axis version as much as possible.

I tried to view the examples like http://webmonarch.github.com/d34raphael/minimal.html in IE 8 via Wine (installed vie PlayOnLinux).

Basic JS code (like printing a "hello world") works in the browser, but the examples don't render.

Is there a difference in the JS engine between IE8 on Windows and IE8 on Linux via Wine?

I have a scatter plot created purely using d3.js.

I am wondering whether its possible to use Raphael.js paper.path() functionality on my scatter plot so that i can draw polygons on the scatter plot. I need to track mouse click and double click on the scatter plot to set the polygon.

Is this some thing direct or should i need to redraw my scatter plot using d34raphael.js. In that case should i be able to use Raphael.js paper.path() functionality easily ? some thing like d3.raphael.path()

Add deep support for d3's and raphael's event interfaces

I think this project would be easier to consume and understand if it were packaged as as standalone D3 plugin rather than a fork of D3 itself. Essentially the project should just consist of everything in this directory: https://github.com/webmonarch/d3/tree/raphael-compat/src/raphael and build into a single file.

We could then include instructions on how to consume this file, along with a custom build of D3 to get this working. I think most developers have some sort of asset build system in place that this will not be an issue.

We are using selectAll function in this we are passing data to plot objects . Data contains array of 2000 elements while plotting this it's taking so much time in ie8 and while loading it ask to stop the script.

We are using d34raphael to give it functionality like d3.

for ex.

var raphael = new Raphael(document.body,0,0);
var d3_raphael = d3.raphael(raphael);

var svg = d3_raphael.select("body").append("svg:svg")
.attr("width",1000)
.attr("height",600);

svg.selectAll("circle")
.data(Data)
.enter()
.append("circle")

We currently build the documentation for d34raphael using jsdoc. We are using the default template of JSDoc, and it has a few limitations, specifically:

• there are no links back to the main d34r site
• there is no header or other copy that identifies the page as being about/for d34r
• the style of the JSDoc pages have nothing in common with the main d34r pages

i would like to add a mouseover-event listener for my element. Is this possible?

svg.append('circle')
.attr('cx', coordinates[0])
.attr('cy', coordinates[1])
.attr('r', 11)
.attr("class", "mouseovermarkers")

.on("mouseover", function(){showdetails(office)});

Clearly document methods in d34r, highlight differences between their corresponding d3 version, and connect to raphael documentation when possible

Current, when calling selection.select(selector), the selector is only allowed to be a primitive element name (ie: circle, rect, path).

the selector capability should be expanded to support selecting on node class name, ie:

selection.selectAll("circle.point")

I am using d3 with raphael to provide support to lower versions of internet explorers. but it is not supporting mouseover function as i am using d3_raphael object? how to resolve this

var stuff = {className:"", children:[
{className:"TVI", packageName:'aa', value:2000},
{className:"hellona", packageName:'bb', value: 800},
{className:"RTP2 manoj", packageName:'bb', value: 550}
]};

var raphael = new Raphael(document.body,500,500);
raphael.setStart();
var d3_raphael = d3.raphael(raphael);

var r = 400,
format = d3.format(",d"),
fill = d3.scale.category10();

var bubble = d3.layout.pack()
.sort(function(a, b) {return b.value - a.value;})
.size([r, r]);

var chart = d3_raphael.select("body").append("svg:svg")
.attr("width", r)
.attr("height", r)
.attr("class", "bubble");
var node = chart.selectAll("g.node")
.data(bubble.nodes(stuff))
.enter().append("circle")
.attr("class", "node")
.attr("cx",function(d) { return d.x; })
.attr("cy",function(d) { return d.y; })
.attr("r", function(d) { return d.r; })
.attr("fill", function(d) { return fill(d.packageName); })
.on("mouseover", function() { alert('Helo');})

Right now, d3 + d34r builds into a monolithic JS file, it should be possible to build d34r specific additions into it's own file which should be used alongside d3 js.

This is will be complicated by the fact that the d34r impl re-uses a fair bit of code from d3, so building it stand-alone isn't currently possible.

I don't think its there. I see ticks and tickSize but no tickFormat.

var raphael = new Raphael(0, 0, "100%", "100%");
raphael.setStart();
d3_raphael = d3.raphael(raphael);

svg = d3_raphael.select("body").append("svg:svg")
.attr("width",svg_w)
.attr("height",svg_h);

xAxis.scale(x)

svg.select("#x_axis")
.call(xAxis);
d3_raphael.call(xAxis);

svg.selectAll("#year_bar")
.data([0])
.enter()
.append("rect")
.attr("id", "year_bar")
.attr("x", 0)
.attr("y", 4)
.attr("width", 0)
.attr("height", 10);

D3 states that after a nodes is appended, it should be available in the update selection. This makes the code a lot easier when appends/updates share the same attributes, which they usually do.

var circle = svg.selectAll("circle")
    .data([32, 57, 293], String);

circle.enter().append("circle")
    .attr("cy", 90)
    .attr("cx", String)
    .attr("r", Math.sqrt);

If jQuery is present we can have d34raphael automatically expose it if needed. For example:

 if (typeof jQuery != 'undefined' && jQuery.browser.msie) {
     window.Sizzle = jQuery.find;
 }

This will make d34raphael slightly easier to consume for jQuery users.