cross browser - "Tick is not defined" error on Firefox, using d3 -

i new both d3 , web programming generally. have put force layout graph based on https://gist.github.com/mbostock/1153292. graph works fine in safari, chrome , opera (i haven't checked ie yet).however when try use in firefox error "tick not defined".i using firefox 12.

any advice on appreciated thanks, claire

(the code js script file , triggered on mouse click, force layout part below.).

d3.csv("data/sharing.csv?r1",  function(error, data) {                     dataset = data                     var nodes = {};          dataset.foreach(function(link) {         link.source = nodes[link.source] || (nodes[link.source] =    {name:link.source});         link.target = nodes[link.target] || (nodes[link.target] = {name: link.target});         });           var w = 500;         var h = 600;                           var force = d3.layout.force()             .nodes(d3.values(nodes))             .links(dataset)             .size([w-10,h-10])              .linkdistance(60)              .charge(-375)              .on("tick", tick)             .start();          //draw svg canvas         var svg = d3.select("#svgcontainer").append("svg").attr("id", "viz").attr("width", w).attr("height", h)          // create arrowheads         svg.append("svg:defs").selectall("marker")             .data(["end-arrow"])             .enter()             .append("svg:marker")             .attr("id", string)             .attr("viewbox", "0 -5 10 10")             .attr("refx", 15)             .attr("refy", -1.5)             .attr("markerwidth", 6)             .attr("markerheight", 6)             .attr("orient", "auto")             .attr("fill", "black")              .append("svg:path")             .attr("d", "m0,-5l10,0l0,5");          //add links between nodes , draw arrowhead @ end of it.         var path = svg.append("svg:g").selectall("path")             .data(force.links())             .enter()             .append("svg:path")             .attr("stroke-width",2)                         .attr("stroke", "black")             .attr("fill","none")             .attr("marker-end", "url(#end-arrow)");          //draw circles nodes         var circle = svg.append("svg:g").selectall("circle")             .data(force.nodes())             .enter()             .append("svg:circle")             .attr("r", 6)             .attr("fill", "white")             .attr("stroke", "black")             .call(force.drag)             .on("mouseover", fade(.1))             .on("mouseout", fade(1))          //label nodes/circles         var text = svg.append("svg:g").selectall("g")             .data(force.nodes())             .enter()             .append("svg:g")          text.append("svg:text")             .attr("x", 8)             .attr("y", ".31em")             .text(function(d) { return d.name; })          function tick() {           path.attr("d", 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;           });            circle.attr("transform", function(d) {             return "translate(" + d.x + "," + d.y + ")";           });            text.attr("transform", function(d) {             return "translate(" + d.x + "," + d.y + ")";           });         }   =============reply comment == full script including call csv===  //if sharing button clicked, load sharing data d3.select("#sharing").on("click", function() { d3.csv("data/sharing.csv?r1",  function(error, data) { if (error)   {//if error not null,(i.e : goes wrong), log error.                             window.console.log(error);       }  else  {//if file loaded correctly, log data console.    dataset = data window.console.log(dataset)  color = getcolor() viztype = "force";  //hide date fields/buttons not applicable  d3.select("#instructions").classed("hidden", true); d3.select("#instructions2").classed("hidden", false); d3.select("#startlabel").classed("hidden", true);    d3.select("#startdate").classed("hidden", true);     d3.select("#endlabel").classed("hidden", true);  d3.select("#enddate").classed("hidden", true);   d3.select("#removefilter").classed("hidden", true);  d3.select("#sharing").classed("hidden", true); d3.select("#showdata").classed("hidden", false); d3.select("#showdata").attr("value", "back circles vizualization"); d3.select("#tipsdata").classed("hidden", true);  d3.select("#ncpdata").classed("hidden", true);       d3.select("#tipsncpdata").classed("hidden", true); d3.select("#tipslabel").classed("hidden", true);     d3.select("#ncplabel").classed("hidden", true);      d3.select("#tipsncplabel").classed("hidden", true);    //clear previous viz , data d3.select("#viz").remove(); d3.select("#stagetable").remove(); d3.select("#usertable").remove();  //gets count of sender records/source , stage/type           var sendercount = getsortingcount(dataset,"sender"); var stagecount = getsortingcount(dataset,"stage");  //create tables summarising results var summarysendertable = tabulate(sendercount, ["shared", "sender"], viztype);   var summarystagetable = tabulate(stagecount, ["shared", "stage"], viztype);  var nodes = {};  // each datapoint, check if node exists already, if not create new one.  dataset.foreach(function(link) { link.source = nodes[link.source] || (nodes[link.source] ={name: link.source}); link.target = nodes[link.target] || (nodes[link.target] = {name: link.target}); });  //set width , height svg, display viz var w = 500; var h = 600;  var force = d3.layout.force()           .nodes(d3.values(nodes))           .links(dataset)           .size([w-10,h-10])         .linkdistance(60)        .charge(-375)        .on("tick", tick)       .start();  //draw svg var svg =    d3.select("#svgcontainer").append("svg") .attr("id","viz").attr("width",w).attr("height", h)  // create arrowheads svg.append("svg:defs").selectall("marker")           .data(["end-arrow"])           .enter().append("svg:marker")           .attr("id", string)           .attr("viewbox", "0 -5 10 10")           .attr("refx", 15)           .attr("refy", -1.5)           .attr("markerwidth", 6)           .attr("markerheight", 6)           .attr("orient", "auto")           .attr("fill", "black")            .append("svg:path")           .attr("d", "m0,-5l10,0l0,5");  //add links between nodes , draw arrowhead @ end of it. var path = svg.append("svg:g").selectall("path")      .data(force.links())      .enter()      .append("svg:path")      .attr("stroke-width",2)      .attr("stroke", function(d){return color(d.screenname)})        .attr("fill","none")      .attr("marker-end", "url(#end-arrow)");  //draw circles nodes var circle = svg.append("svg:g").selectall("circle")        .data(force.nodes())            .enter()            .append("svg:circle")            .attr("r", 6)        .attr("fill", "white")        .attr("stroke", "black")        .call(force.drag)        .on("mouseover", fade(.1))        .on("mouseout", fade(1))  //label nodes/circles var text = svg.append("svg:g").selectall("g")           .data(force.nodes())       .enter()       .append("svg:g")          text.append("svg:text")       .attr("x", 8)       .attr("y", ".31em")       .text(function(d) { return d.name; })    //set radius arrows , applies transform  function tick() {    path.attr("d", 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;    });     circle.attr("transform", function(d) {    return "translate(" + d.x + "," + d.y + ")";    });     text.attr("transform", function(d) {     return "translate(" + d.x + "," + d.y + ")";    }); }    //allow filter row on stagetable d3.select("#stage").select("#stagetable").selectall("tr")           .on("click", function(d){           d3.select(this)           var rowtext = this.childnodes[1].innerhtml           var svg = d3.select("#svgcontainer").select("svg")           var path = svg.selectall("path")                 .style ("opacity", 1)                 .transition()                     .duration(250)                 .style ("opacity", function(d){           if(d.screenname == rowtext){                         d3.selectall("marker path").transition().style("stroke-opacity", 1);           return fade(1)               }          else{         d3.selectall("marker path").transition().style("stroke-opacity", 0.1);           return 0.1           })         d3.select("#removefilter").classed("hidden", false);                           })  //checks links connected which(used mouseover)  var linkedbyindex = {}; dataset.foreach(function(d) {linkedbyindex[d.source.index + "," + d.target.index] = 1;});  function isconnected(a, b) { return linkedbyindex[a.index + "," + b.index] || linkedbyindex[b.index + "," + a.index] ||     a.index == b.index; }                                                         //fades in/out circles , arrows on mouseover. function fade(opacity) { return function(d) { circle.style("stroke-opacity", function(o) { thisopacity = isconnected(d, o) ? 1 : opacity; this.setattribute('fill-opacity', thisopacity); return thisopacity;  }); path.style("stroke-opacity", function(o) { return o.source === d || o.target === d ? 1 : opacity;  });  }; }         }    })  })  accessor colour function getcolor(){ return color }                            

seeing entire source code helped clarify things. there if/else statement @ top checks error. entire rest of code inside else block. what's causing problem.

function declarations (such tick() in case) have browser-specific weird behaviour when defined inside conditional blocks. here's pretty write-up explains differences between function declarations, function expressions , ill-defined , inconsistently supported function statements (which you've inadvertently created code living in else block).

if pull code out of else block, think behavior should more predictable across browsers.

in general, it's not programming practice create enormous, long conditional blocks. not introduce possibility of these types of errors can difficult read , understand. same thing goes nested conditions.

try keep conditions tight code living inside conditional blocks corresponds directly meaning of condition itself. should able read intention of condition , block contents out loud , should make sense together. as possible, code doesn't have condition should @ top level of function containing it. can increase readability factoring code meaningful functions , keeping conditions under control.

in example above, do:

if (error) {                                 window.console.log(error);       }  else {     window.console.log(dataset); }  dataset = data  color = getcolor() viztype = "force"; ... ... rest of code 

one final comment tool jslint or jshint validate code. point out problems automatically. can overly strict learning experience @ least understand it's complaining about.