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 等。但我不知道如何克服这个问题。

以前有没有人做过这样的事情的经验？如果是这样，您是否有任何指示可以向我发送正确的方向？

谢谢

4

0 回答 0