Wednesday, 21 August 2013

jquery wait for SVG to be created then run function

jquery wait for SVG to be created then run function

Simply, I'm trying to get some jQuery to run after an SVG has been
generated by D3.
I've tried placing function 2 inside function 1:
function 1(){
D3 Code here...
function2();
};
However this is running too soon, I've tried using $(document).load() and
$(window).load(), again it's still too soon, the code works when I call
the function from the terminal in Chrome, I've also tried creating an
event listener, waiting for
<g ... id='csv'>
to be created.
http://msc-media.co.uk/4SQ/city_profile.php : the donut in the middle is
where the tooltips should be working. If you want to see them, call
'tooltip();' in the console.
Here's the full code (ignore the PHP calls):
function tooltip(){
$(".graph-cardiff").qtip({ // Grab some elements to apply the
tooltip to
content: {
attr: "data-title"
}
});
}
function donut_'.$city.'(){
var width = '.$width.',
height = '.$height.',
radius = Math.min(width, height) / 2,
color = d3.scale.category20c();
var svg = d3.select("'.$div.'").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height * .52 +
")")
.attr("id", "svg");
var partition = d3.layout.partition()
.sort(null)
.size([2 * Math.PI, radius * radius])
.value(function(d) { return 1; });
var arc = d3.svg.arc()
.startAngle(function(d) { return d.x; })
.endAngle(function(d) { return d.x + d.dx; })
.innerRadius(function(d) { return Math.sqrt(d.y); })
.outerRadius(function(d) { return Math.sqrt(d.y + d.dy); });
d3.json("js/'.$city.'.json", function(error, root) {
var path = svg.datum(root).selectAll("path")
.data(partition.nodes)
.enter().append("path")
.attr("display", function(d) { return d.depth ? null : "none";
}) // hide inner ring
.attr("d", arc)
.attr("class", "graph-'.$city.'")
.attr("data-title", function(d) { return d.name })
.attr("data-size", function(d) { return d.size; })
.style("stroke", "#fff")
.style("fill", function(d) { return color((d.children ? d :
d.parent).name); })
.style("fill-rule", "evenodd")
.each(stash);
d3.selectAll(".button-'.$city.'").on("change", function change() {
var value = this.value === "count"
? function() { return 1; }
: function(d) { return d.size; };
path
.data(partition.value(value).nodes)
.transition()
.duration(1500)
.attrTween("d", arcTween);
});
});
// Stash the old values for transition.
function stash(d) {
d.x0 = d.x;
d.dx0 = d.dx;
}
// Interpolate the arcs in data space.
function arcTween(a) {
var i = d3.interpolate({x: a.x0, dx: a.dx0}, a);
return function(t) {
var b = i(t);
a.x0 = b.x;
a.dx0 = b.dx;
return arc(b);
};
}
d3.select(self.frameElement).style("height", height + "px");
tooltip();
}
donut_'.$city.'();

No comments:

Post a Comment