D3树形图颜色混淆

Question

我根据这个例子创建了一个D3树形图：http://bl.ocks.org/mbostock/4063582。我的版本还会在单击树形图或按钮后显示子项。

尺寸/计数更改功能不能正常工作：我得到双节点，背景颜色混合，并且有没有背景颜色的div。

color = d3.scale.ordinal()
    .domain(colorDomainArr) //colorDomainArr = [0,1,2,3]
    .range([ 
        "#b1e1d7", "#c1e7df", "#d1ede6", "#e1f3ee", //lichtblauw
        "#688ea3", "#87a4b5", "#a5bac7", "#c3d0d9", //donkerblauw
        "#cbb84c", "#d7c671", "#e3d494", //"#eee2b7", //geel
        "#b9c2c1", "#ced4d3", "#e3e6e6", //"#f8f8f8", //grijs
    ]);

它曾经工作过，但在我修复了另一个类似的颜色问题后却没有。

我还没有改变change（）函数。

我已尝试添加

node.style("background", function(d) {
    return d.children && d.depth != ondiepst && d.depth != ondiepst-1 ? color(d.name) : null
})

颜色也由

完成

d3.selectAll(".BG").style("background", function(d) { return color(d.name) });

1. 在第一个视图中一切顺利
2. 点击＆＃39; Laat alles zien＆＃39; - 按钮：颜色混淆
3. 点击＆＃39; count＆＃39;单选按钮：某些节点上没有背景颜色
4. 点击＆＃39; Originele weergave＆＃39;按钮：好像一切都很顺利，但我们看到＆＃39;尺寸＆＃39;版本而不是＆＃39;计数＆＃39;版。
5. 点击＆＃39;尺寸＆＃39;单选按钮：三个/四倍双节点而不是原始视图

jsfiddle并不像在本地那样工作，但它显示了我的问题和代码。 https://jsfiddle.net/zjx967g4/