Javascript 使用d3.js在一个页面上显示多个teemaps

我试图在一个页面上创建一个包含多个树形图的页面。到目前为止，我已经能够使用一个传递json的函数来实现这一点。但是当我试图改变树形图中的值时，我遇到了各种各样的问题。以下是创建树形图的函数，您可以看到on change函数的开始：

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等，但我不确定如何克服这个问题

以前有人做过类似的事情吗？如果是这样的话，你有什么建议可以告诉我正确的方向吗

---

谢谢

查看帖子中的视频和代码，我发现它们非常有用：