Javascript 在树映射d3.js中解析json以获得不同的颜色

我跟随链接以供参考

但是这个链接中的json是不同的。 我想分析：

[
    {\"name\":\"ABC\",\"amount\":489956},
    {\"name\":\"XYZ\",\"amount\":54554726}
]

我已尝试使用此代码：

     var svg = d3.select("svg"), width = +svg.attr("width"), height = +svg
            .attr("height");

    var fader = function(color) {
        return d3.interpolateRgb(color, "#fff")(0.2);
    }, color = d3.scaleOrdinal(d3.schemeCategory20.map(fader)), format = d3
            .format(",d");

    var treemap = d3.treemap().tile(d3.treemapResquarify).size(
            [ width, height ]).round(true).paddingInner(1);

  var jsonResp = "{\"name\": \"schools\",\"children\":[{\"name\":\"ABC\",\"amount\":489956},{\"name\":\"XYZ\",\"amount\":54554726}]}";

    var data = JSON.parse(jsonResp);    
    var root = d3.hierarchy(data).eachBefore(
                function(d) {
                    d.data.id = (d.parent ? d.parent.data.id + "." : "")
                            + d.data.name;
                }).sum(sumBySize).sort(function(a, b) {
            return b.height - a.height || b.value - a.value;
        });

        treemap(root);

        var cell = svg.selectAll("g").data(root.leaves()).enter().append(
                "g").attr("transform", function(d) {
            return "translate(" + d.x0 + "," + d.y0 + ")";
        });

        cell.append("rect").attr("id", function(d) {
            return d.data.id;
        }).attr("width", function(d) {
            return d.x1 - d.x0;
        }).attr("height", function(d) {
            return d.y1 - d.y0;
        }).attr("fill", function(d) {
            return color(d.parent.data.id);
        });

        cell.append("clipPath").attr("id", function(d) {
            return "clip-" + d.data.id;
        }).append("use").attr("xlink:href", function(d) {
            return "#" + d.data.id;
        });

        cell.append("text").attr("clip-path", function(d) {
            return "url(#clip-" + d.data.id + ")";
        }).selectAll("tspan").data(function(d) {
            return d.data.name.split(/(?=[A-Z][^A-Z])/g);
        }).enter().append("tspan").attr("x", 4).attr("y", function(d, i) {
            return 13 + i * 10;
        }).text(function(d) {
            return d;
        });

        cell.append("title").text(function(d) {
            return  "Amount - "+format(d.value)+" ";
        });

        d3.selectAll("input").data([ sumBySize, sumByCount ], function(d) {
            return d ? d.name : this.value;
        }).on("change", changed);

        var timeout = d3.timeout(function() {
            d3.select("input[value=\"sumByCount\"]").property("checked",
                    true).dispatch("change");
        }, 2000);

        function changed(sum) {
            timeout.stop();
            treemap(root.sum(sum));
            cell.transition().duration(750).attr("transform", function(d) {
                return "translate(" + d.x0 + "," + d.y0 + ")";
            }).select("rect").attr("width", function(d) {
                return d.x1 - d.x0;
            }).attr("height", function(d) {
                return d.y1 - d.y0;
            });
        }
    });

    function sumBySize(d) {
        return d.amount;
    } 

但是我在解析的json中得到的所有对象的颜色都是相同的。我希望每个对象都有不同的颜色，而不改变前面提到的json的结构。如何更改代码中的解析以获得每个对象的不同颜色？ 我需要用json和数字对金额进行分类，并将其显示在悬停状态。

---

我只是d3.js的初学者。

首先，您提供的代码有几个问题：

您删除了d3.jsonflare.json、functionerror和数据{ 从原始代码中删除，但忘记删除关闭}；导致错误的 您删除了代码其余部分中使用的sumByCount定义，导致了另一个错误 关于颜色问题，矩形的颜色设置如下：

cell.append("rect").attr("id", function(d) {
            return d.data.id;
        }).attr("width", function(d) {
            return d.x1 - d.x0;
        }).attr("height", function(d) {
            return d.y1 - d.y0;
        }).attr("fill", function(d) {
            return color(d.parent.data.id);
        });

它由“填充”属性控制。这意味着d.parent.data.id可能存在问题

这里是数组root.leaves的一个元素。如果您在控制台中打印出来，您将看到d.parent.data.id与每个元素的“schools”匹配。这就是为什么颜色比例返回相同的颜色

如果您直接使用d.data.id，并将示例中的html与您的数据一起使用，则最终会得到一个打印出root.leaves的工作代码：

var svg=d3.selectsvg， 宽度=+svg.attrwidth， 高度=+svg .身高； var fader=functioncolor{ 返回d3.b颜色，fff0.2； }, color=d3.scaleOrdinald3.schemeCategory 10.mapfader， 格式=d3 .格式，d； var treemap=d3.treemap.tiled3.treemapResquarify.size [宽度，高度].roundtrue.paddinginer1； var jsonResp={\name\：\schools\，\children\：[{\name\：\ABC\，\amount\：489956}，{\name\：\XYZ\，\amount\：54554726}； var data=JSON.parsejsonResp； var root=d3.hierarchydata.eachBefore 功能{ d、 data.id=d.parent？d.parent.data.id+：+ d、 data.name； }.sumbysize.sort函数a，b{ 返回b.height-a.height | | b.value-a.value； }; 树状体； 控制台日志数据； console.logroot.leaves； var cell=svg.selectAllg.dataroot.leaves.enter.append g、 属性转换，函数{ 返回translate+d.x0+，+d.y0+； }; cell.appendrect.attrid，函数为{ 返回d.data.id； }.attrwidth，函数d{ 返回d.x1-d.x0； }.attr高度，功能{ 返回d.y1-d.y0； }.attrfill，函数d{ 返回colord.data.id； }; cell.appendclipPath.attrid，函数为{ 返回剪辑-+d.data.id； }.appenduse.attrxlink:href，函数d{ return+d.data.id； }; cell.appendtext.attrclip-path，函数d{ 返回urlclip-+d.data.id+； }。选择Alltspan.datafunctiond{ 返回d.data.name.split/？=[A-Z][^A-Z]/g； }.enter.appendtspan.attrx，4.attry，functionad，i{ 返回13+i*10； }.textfunctiond{ 返回d； }; cell.appendtitle.textfunctiond{ 返回金额-+格式值+； }; d3.选择输入数据[sumBySize，sumByCount]，函数D{ 返回d？d.名称：this.value； }.一旦改变，就改变； 变量超时=d3.timeoutfunction{ d3.选择输入[value=\sumByCount\]。属性已检查， 真的。改变； }, 2000; 功能改变{ 超时。停止； 三叶树； cell.transition.duration750.attrtransform，函数D{ 返回translate+d.x0+，+d.y0+； }.selectrect.attrwidth，函数D{ 返回d.x1-d.x0； }.attr高度，功能{ 返回d.y1-d.y0； }; } 函数sumByCountd{ 返回d.children？0:1； } 函数求和{ 返回d.金额； } 大小 计数

---

什么是/stack/test.js？啊，好主意！在将代码放入代码段之前，我在本地运行了代码，但忘记删除导入。我马上编辑它！这成功了！非常感谢您的详细解释well@Araelath.