d3.js v4 嵌套到层次结构 - 无法读取值

Question

下面的函数有点问题。

我将 d3 嵌套传递给此函数并将其转换为 d3 层次结构。

想根据 scaledFTE 调整我的圈子（在一个包中）的大小。但是，我无法参考 scaledFTE 值。

我附上显示 D3 层次结构和错误消息的控制台屏幕截图。

感谢您的帮助

function layoutAndRenderHierarchyInNestFormat (nestFormatHierarchy, rootName){
    //Lays out and renders hierarchy in "nest" ("key-values" format).
    
        //Move the 'nest' array into a root node:
        var datasetAsJsonD3Hierarchy = {"key":rootName, "values": nestFormatHierarchy}
        
        console.log(datasetAsJsonD3Hierarchy)

        //Now create hierarchy structure 
        //Note that we need to add the "children" accessor "d=>d.values" in order
        //to tell d3.hierarchy to use nest's 'values' as children
        hierarchyGraph = d3
            .hierarchy(datasetAsJsonD3Hierarchy, d=>d.values) 
            //NB below is required for d3.pack etc that use a size attribute (e.g. for the different sizes of circles in d3.pack)
            .sum(d=>d.value.scaledFTE) //accessor for size data (e.g. circle size in a d3.pack)
               
            console.log(hierarchyGraph)
        
        //Can now calculate position data and render
        calculatepositionsAndRender(hierarchyGraph);
    }


[Screenshot of raw data structure][1]
[Console screenshot showing nest/hierarchy data structure][2]


  [1]: https://i.stack.imgur.com/5yXst.jpg
  [2]: https://i.stack.imgur.com/WZ60A.png

Answer 1

您的嵌套数据的某些节点不包含 d.value（例如，在您的屏幕截图中，带有键的节点："REF2014"）。

d3.hierarchy(...).sum(accessor function) // iterates over every node and calls the accessor function. So nodes with no value property lead to an error when calling .sum(d=>d.value.scaledFTE).

另见https://github.com/d3/d3-hierarchy/blob/master/README.md#node_sum

所以你可以这样做：

function layoutAndRenderHierarchyInNestFormat (nestFormatHierarchy, rootName){
//Lays out and renders hierarchy in "nest" ("key-values" format).

    //Move the 'nest' array into a root node:
    var datasetAsJsonD3Hierarchy = {"key":rootName, "values": nestFormatHierarchy}
    
    console.log(datasetAsJsonD3Hierarchy)

    //Now create hierarchy structure 
    //Note that we need to add the "children" accessor "d=>d.values" in order
    //to tell d3.hierarchy to use nest's 'values' as children
    hierarchyGraph = d3
        .hierarchy(datasetAsJsonD3Hierarchy, d=>d.values) 
        //NB below is required for d3.pack etc that use a size attribute (e.g. for the different sizes of circles in d3.pack)
        .sum(d=> d.value ? d.value.scaledFTE : 0) //accessor for size data (e.g. circle size in a d3.pack)
           
        console.log(hierarchyGraph)
    
    //Can now calculate position data and render
    calculatepositionsAndRender(hierarchyGraph);
}