如何在Object中更新D3js

Question

我正在研究一种主要使用D3js库的教育工具。为了使我的代码的一部分可重用，我想在构造函数中放入尽可能多的代码，以便我可以使用该构造函数的实例。但是，当我尝试更新图形的部分（例如边框颜色）时会出现一个非常奇怪的错误：边框的一小部分会改变颜色和，因为更加奇怪，当我在浏览器中切换到另一个边框然后返回时，边框的其余部分会发生变化。

此jsfiddle显示问题。加载后，画布边框为黑色。单击“红色”/“蓝色”时，边框应变为红色/蓝色。在Firefox中，这可以正常工作，但在Chrome和Safari中，只有一小部分边框会改变颜色......

我使用的代码如下：

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);

点击“红色”/“蓝色”类应该改变颜色的红色/蓝色功能：

$("#red").click(function(){Canvas1.red();});
$("#blue").click(function(){Canvas1.blue()});

由于这适用于Firefox，我认为问题与Webkit有关，但我不知道如何修复它......

非常感谢任何帮助！