Object 如何在对象内部更新D3js

我正在开发一个主要使用D3js库的教育工具。为了使部分代码可重用，我希望在构造函数中放入尽可能多的代码，以便可以使用该构造函数的实例。然而，当我尝试更新图形的部分（例如边框颜色）时，会出现一个非常奇怪的错误：只有一小部分边框会改变颜色，为了更奇怪，当我在浏览器中切换到另一个不同的位置然后返回时，其余的边框会改变。

这说明了问题所在。加载时，画布边框为黑色。单击“红色”/“蓝色”时，边框应变为红色/蓝色。在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有关，但我不知道如何解决它

---

非常感谢您的帮助

这确实是webkit的一个问题，更多细节和解决方案。也可以帮忙。@Larskothoff谢谢你的指导！在经历了一些选择之后，我发现了一些适合我的东西。可以找到更新fiddle。