PDA

View Full Version : Passing datum to D3 function



kayasa
23 Apr 2015, 11:27 AM
I am trying to implement something like this using D3, within an Ext JS 4.2 application.

http://bl.ocks.org/mbostock/1153292

In D3, 'path.attr("d", linkArc);', passes datum to linkArc function. This works fine in the D3 world.


function tick() {

path.attr("d", linkArc); circle.attr("transform", transform); text.attr("transform", transform);}function linkArc(d) { var dx = d.target.x - d.source.x, dy = d.target.y - d.source.y, dr = Math.sqrt(dx * dx + dy * dy); return "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr + " 0 0,1 " + d.target.x + "," + d.target.y; }

However, I am trying to use this within Ext JS (D3 JS is loaded in the afterRender() function) -

I am doing this in Ext JS -


tick: function(path) { console.log('Inside Tick --');
path.attr("d", linkArc);
circle.attr("transform", transform);
text.attr("transform", transform);
},


linkArc: function(d) {
var dx = d.target.x - d.source.x,
dy = d.target.y - d.source.y,
dr = Math.sqrt(dx * dx + dy * dy);
return "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr + " 0 0,1 " + d.target.x + "," + d.target.y;

},

This gives me an error at runtime -


Uncaught ReferenceError: linkArc is not defined

Is there another way to achieve this? Thank you.

Gary Schlosberg
23 Apr 2015, 3:15 PM
Looks like it's not getting loaded in time. Can you include the d3 code in your index.html after the Ext library?

kayasa
23 Apr 2015, 7:07 PM
Thanks for your reply.

There is no index.html as this code is called from a framework. I think D3.js is getting loaded, else previous calls to D3 functions would have failed.

I suspect, the problem is because Ext JS expects the function to be called in a different way.

In the tick function, linkArc function is called using

path.attr("d", linkArc);

and linkArc function is defined as

linkArc: function(d) { }

In Ext JS, when this is run, I get the following error in browser console -

Uncaught ReferenceError: linkArc is not defined

It seems this is happening because linkArc is expecting datum, which is not getting passed explicitly.

Should this function be invoked in a different way?

Attached is the Ext JS code.

Thank you