I am working on an educational tool that mainly uses the D3js library. To make parts of my code reusable, I want to put as much code as possible inside a constructor, so that I can work with instances of that constructor. However, a very weird bug shows up when I try to update parts (for instance the border-color) of the graphic: only a small part of the border changes color and, for extra weirdness, the rest of the border changes when I switch to a different in my browser and then come back.
This jsfiddle shows the problem. Upon loading the canvas border is black. When "Red"/"Blue" is clicked, the border should turn red/blue. In Firefox this works fine, but in both Chrome and Safari only a small part of the border changes color…
The code I use is the following:
var Canvas = function(B, H){
this.canvas = d3.select("#holder").append("svg:svg").attr("width",B).attr("height",H)
.style({'border':'5px solid black'});
this.red = function(){this.canvas.style({'border':'5px solid red'});};
this.blue = function(){this.canvas.style({'border':'5px solid blue'});};
}
var Canvas1 = new Canvas(200,70);
Click "Red"/"Blue" class the red/blue functions that should change the color:
$("#red").click(function(){Canvas1.red();});
$("#blue").click(function(){Canvas1.blue()});
Since this works fine with Firefox I suppose the problem has something to do with the Webkit, but I have no idea how to fix it…
Any help is much appreciated!
