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.

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.