根元素未在 sunburst 中显示其 children

Question

我正在尝试按照 https://bl.ocks.org/denjn5/3b74baf5edc4ac93d5e487136481c601 上的 3 部分教程制作旭日形图案我的 json 包含基于国家和产品部门的销售信息。我试图在第一层展示基于国家的销售，在第二层展示基于产品部门的销售。我的 Json 文件如下所示：

    {
       "country": "All", 
        "shares":[

        {
            "country": "at",
            "shares":[
                {
                "productdivision": "accessorie",
                "label": 53222
                },
                {
                "productdivision": "apparel",
                "label": 365712
                },
                {
                "productdivision": "footwear",
                "label": 523684
                }
            ]
        },

        {
            "country": "be",
            "shares":[
                {
                "productdivision": "accessorie",
                "label": 57522
                },
                {
                 "productdivision": "apparel",
                 "label": 598712
                },
                {
                "productdivision": "footwear",
                "label": 52284
                }
            ]
        },

        {
            "country": "DE",
            "shares":[
                {
                "productdivision": "accessorie",
                "label": 56982

                },
                {
                "productdivision": "apparel",
                "label": 55312
                },
                {
                "productdivision": "footwear",
                "label": 67284
                }
            ]
         },

        {
            "country": "Fr",
            "shares":[
                {
                "productdivision": "accessorie",
                "label": 5862
                },
                {
                "productdivision": "apparel",
                "label": 45312
                },
                {
                "productdivision": "footwear",
                "label": 26284
                }
            ]
        }

    ]
    }

这个 json 文件的名称是 kpiDrillDown2.json，我在我的代码中用 d3.json() 调用它。我对代码进行了细微更改以处理我的数据。代码如下：

<html>
    <head>
        <style>
            @import url('https://fonts.googleapis.com/css?family=Raleway');
            body {
                    font-family: "Raleway", "Helvetica Neue", Helvetica, Arial, sans-serif;
                }
        </style>

        <script src="https://d3js.org/d3.v4.min.js"></script>
    </head>
    <body>
        <svg></svg>
        <script>
            //initialize variables
            var width = 500; 
            var height = 500;
            var radius = Math.min(width, height) / 2;  
            var color = d3.scaleOrdinal(d3.schemeCategory20b);  

            //setting up svg workspace
            var g = d3.select('svg')  
                    .attr('width', width)  
                    .attr('height', height)
                    .append('g')  
                    .attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')'); 

            //formatting the data
            var partition = d3.partition()      
                            .size([2 * Math.PI, radius]);

            function draw(nodeData){

                debugger;
                //finding the root node
                var root = d3.hierarchy(nodeData)     
                            .sum(function (d) { return d.label});           

                //calculating each arc
                partition(root);    

                var arc = d3.arc()  
                            .startAngle(function (d) { return d.x0; })     
                            .endAngle(function (d) { return d.x1; })       
                            .innerRadius(function (d) { return d.y0; })    
                            .outerRadius(function (d) { return d.y1; });   

                g.selectAll('g')   
                    .data(root.descendants())
                    .enter()
                    .append('g')
                    .attr("class", "node")  
                    .append('path') 
                    .attr("display", function (d) { return d.depth ? null : "none"; })
                    .attr("d", arc)
                    .style('stroke', '#fff')
                    .style("fill", function (d) { return color((d.parent ? d : d.parent).data.productdivision); })


                g.selectAll(".node")  
                    .append("text")  
                    .attr("transform", function(d) {
                        return "translate(" + arc.centroid(d) + ")rotate(" + computeTextRotation(d) + ")"; })  
                    .attr("dx", "-20")  
                    .attr("dy", ".5em") 
                    .text(function(d) { return d.parent ? d.data.productdivision : "" }); 


                    function computeTextRotation(d) {
                        var angle = (d.x0 + d.x1) / Math.PI * 90;  

                        // Avoid upside-down labels
                        return (angle < 90 || angle > 270) ? angle : angle + 180; 
                    }

            }

            d3.json('kpiDrillDown3.json', draw);

        </script>
    </body>
</html>

我在绘制函数中放置了一个调试器来检查根元素。 Root 没有任何 children。这是我在控制台中看到的：

当我继续时，出现错误："Cannot read property 'data' of null"。如控制台所示，root 没有 children。我的问题是，我是否需要更改我的 json 数据格式以使 root 能够识别孩子，或者我做错了什么。我是 d3js 的新手，基本上通过获取源代码并对其进行修改，我正在逐步完成。这是控制台中的错误：

感谢您的帮助，非常感谢。

Answer 1

根据 API:

The specified children accessor function is invoked for each datum, starting with the root data, and must return an array of data representing the children, or null if the current datum has no children. If children is not specified, it defaults to:
function children(d) {
    return d.children;
}

但是，在您的数据结构中，您没有 children，而是 shares。

因此，层次结构应为：

var root = d3.hierarchy(data, function(d) {
    return d.shares;
})

请注意，在您链接的那个教程的 JSON 中（就像在 API 的示例中一样），子数组被命名为 children。

这是一个演示，请查看控制台（浏览器的控制台，而不是代码段）：

var data = {
  "country": "All",
  "shares": [{
      "country": "at",
      "shares": [{
          "productdivision": "accessorie",
          "label": 53222
        },
        {
          "productdivision": "apparel",
          "label": 365712
        },
        {
          "productdivision": "footwear",
          "label": 523684
        }
      ]
    },
    {
      "country": "be",
      "shares": [{
          "productdivision": "accessorie",
          "label": 57522
        },
        {
          "productdivision": "apparel",
          "label": 598712
        },
        {
          "productdivision": "footwear",
          "label": 52284
        }
      ]
    },
    {
      "country": "DE",
      "shares": [{
          "productdivision": "accessorie",
          "label": 56982

        },
        {
          "productdivision": "apparel",
          "label": 55312
        },
        {
          "productdivision": "footwear",
          "label": 67284
        }
      ]
    },
    {
      "country": "Fr",
      "shares": [{
          "productdivision": "accessorie",
          "label": 5862
        },
        {
          "productdivision": "apparel",
          "label": 45312
        },
        {
          "productdivision": "footwear",
          "label": 26284
        }
      ]
    }
  ]
};

var root = d3.hierarchy(data, function(d) {
    return d.shares;
  })
  .sum(function(d) {
    return d.label
  });

console.log(root)

<script src="https://d3js.org/d3.v4.min.js"></script>

根元素未在 sunburst 中显示其 children

Root element is not showing its children in sunburst

d3.js

sunburst-diagram