javascript - d3.js を使用して 1 ページに複数のティーマップ

Question

1 ページに複数のツリーマップ グラフを含むページを作成しようとしています。これまでのところ、json を渡す関数を使用してそれを行うことができました。しかし、ツリーマップの値を変更しようとすると、あらゆる種類の問題に遭遇します。ツリーマップを作成する関数を次に示します。変更時の関数の開始を確認できます。

TreeMap.prototype.drawSystem = function(json, key) {
    var treemap = d3.layout.treemap()
        .size([this.d3.width, this.d3.height])
        .sticky(false)
        .value(function(d) { return d.size; });

    var div = d3.select("#systems").append("div")
        .attr("id", key)
        .style("position", "relative")
        .style("width", this.d3.width + "px")
        .style("height", this.d3.height + "px")
        .style("padding", this.d3.padding + "px");

    div.data([json]).selectAll("div")
        .data(treemap.nodes)
        .enter().append("div")
        .attr("class", "cell")
        .style("background", 'red')
        .call(this.cell)
        .text(function(d) { return d.children ? null : d.name + '    Memory: ' + d.size + 'GB'+ '    Disk: ' + d.disk + 'GB'; });

    d3.selectAll("input").on("change", function change(key) {
            console.log(d3);
            console.log(div);
            console.log(key);
        //div.data(treemap.value(
        //    function (d) {
        //        return d.disk;
        //    }
        //)).transition().duration(150).call(this.cell).text(
        //    function (d) {
        //    return d.children ? null : d.name + '    Disk: ' + d.disk + 'GB';
        //}
        //);
    });


};

これは私が使用するJsonです：

{
    "global1": {
        "name": "P",
        "children": [
            {
                "name": "red",
                "children": [
                    {
                        "name": "ADMI - fnet-admi-uat",
                        "size": 20.1,
                        "disk": 10
                    },
                    {
                        "name": "ALEV - fnet-alev3z1",
                        "size": 13.1,
                        "disk": 27
                    }
                ]
            }
        ]
    },
    "global2": {
        "name": "1",
        "children": [
            {
                "name": "red",
                "children": [
                    {
                        "name": "this is another co",
                        "size": 20.1,
                        "disk": 10
                    },
                    {
                        "name": "this is tomshting",
                        "size": 13.1,
                        "disk": 27
                    }
                ]
            }
        ]
    }
}

次のように関数を呼び出します。

            for (key in data) {
                if (typeof data[key] !== 'function') {
                    this.drawSystem(data[key], key);
                }
            }

変数を再利用してdivを作成するなど、どこが間違っているかがわかりますが、これを克服する方法がわかりません。

以前にこのようなことをした経験のある人はいますか? もしそうなら、正しい方向に私を送るための指針はありますか?

ありがとう