Charts 使用局部json变量绘制d3分区图

Charts 使用局部json变量绘制d3分区图,charts,d3.js,partition,Charts,D3.js,Partition,我有一个对象的集合,我已经被格式化,能够以下面的格式在分区图中绘制它 {"name":"Component 234324234","children":[{"name":"Krishna Candidate - 1 435458976766","children":[{"name":"Krishna clinical 23423424","size":23423424},{"name":"DP Componet 98989","size":98989},{"name":"KRUTI COMP,

我有一个对象的集合,我已经被格式化,能够以下面的格式在分区图中绘制它

{"name":"Component 234324234","children":[{"name":"Krishna Candidate - 1 435458976766","children":[{"name":"Krishna clinical 23423424","size":23423424},{"name":"DP Componet 98989","size":98989},{"name":"KRUTI COMP,  435435454353","size":435435454353}],"size":435458976766},{"name":"Krishna Candidate-Test 0","children":[],"size":0},{"name":"Test Candidate 5555","children":[{"name":"ADME Component 5555","size":5555}],"size":5555},{"name":"Candidate 5 37874474288","children":[{"name":"Teset Component 9898988","size":9898988},{"name":"AdmeComponent 34234324324","size":34234324324},{"name":"WPM Component 23432424","size":23432424},{"name":"WPM 1 2344324324","size":2344324324},{"name":"WPM2 234324324","size":234324324},{"name":"WPM 3 2343244","size":2343244},{"name":"WPM 4 23423432","size":23423432},{"name":"WPM 5 2323432","size":2323432},{"name":"Adme component one 989898","size":989898},{"name":"Tejas Jet Fighters 998989898","size":998989898},{"name":"Planned budget 1 100000","size":100000}],"size":37874474288},{"name":"Krishna Candidate 234324234","children":[{"name":"Test Component One 234324234","size":234324234}],"size":234324234}],"size":234324234},{"name":"undefined 4662000","children":[{"name":"Candidate Sirisha 4662000","children":[{"name":"Lead Generation 500000","size":500000},{"name":"Lead Optimization 500000","size":500000},{"name":"Lead Profiling 500000","size":500000},{"name":"BioMarker Discovery 300000","size":300000},{"name":"Target Validation 1000000","size":1000000},{"name":"BioMarker PK/PD 300000","size":300000},{"name":"Synthesize Tox Dose 250000","size":250000},{"name":"BioMarker Validation 300000","size":300000},{"name":"Rodent Tox 200000","size":200000},{"name":"Dog Tox 300000","size":300000},{"name":"Primate Tox 500000","size":500000},{"name":"Planned budget itemi 10000","size":10000},{"name":"Planned budget 1000","size":1000},{"name":"Planned budget 5 1000","size":1000}],"size":4662000}],"size":4662000}]

    d3.json("flare.json", function(root) {
      var g = vis.selectAll("g")
          .data(partition.nodes(root))
        .enter().append("svg:g")
          .attr("transform", function(d) { return "translate(" + x(d.y) + "," + y(d.x) + ")"; })
          .on("click", click);

      var kx = w / root.dx,
          ky = h / 1;

      g.append("svg:rect")
          .attr("width", root.dy * kx)
          .attr("height", function(d) { return d.dx * ky; })
          .attr("class", function(d) { return d.children ? "parent" : "child"; });

      g.append("svg:text")
          .attr("transform", transform)
          .attr("dy", ".35em")
          .style("opacity", function(d) { return d.dx * ky > 12 ? 1 : 0; })
          .text(function(d) { return d.name; })

      d3.select(window)
          .on("click", function() { click(root); })

      function click(d) {
        if (!d.children) return;

        kx = (d.y ? w - 40 : w) / (1 - d.y);
        ky = h / d.dx;
        x.domain([d.y, 1]).range([d.y ? 40 : 0, w]);
        y.domain([d.x, d.x + d.dx]);

        var t = g.transition()
            .duration(d3.event.altKey ? 7500 : 750)
            .attr("transform", function(d) { return "translate(" + x(d.y) + "," + y(d.x) + ")"; });

        t.select("rect")
            .attr("width", d.dy * kx)
            .attr("height", function(d) { return d.dx * ky; });

        t.select("text")
            .attr("transform", transform)
            .style("opacity", function(d) { return d.dx * ky > 12 ? 1 : 0; });

        d3.event.stopPropagation();
      }
分区图需要来自外部url的json对象。
有谁能帮助我如何使用上面的对象来绘制图表

您是否试图使用代码顶部的对象,即以{“name”:…开头的对象

如果是这种情况,您需要为对象指定一个名称,比如数据。您还需要确保它是json格式的,请尝试使用json.lint.com。我发现您的数据不是那种格式,所以我删除了大约一半

接下来,您的代码将从根目录调用flare.json,我想这不是您想要看到的,因此您需要删除代码的这一部分(不要忘记末尾的括号(如果有)

d3.json("flare.json", function(root) {
现在,由于代码中的数据不需要调用,因此它将与其他代码一起加载到页面上

然后需要用数据替换对root的引用

现在看来,您基于此的代码来自。一旦我添加了已编辑掉的位,并在代码上方进行了更改