d3.js - d3 - 如何在 v5 中返回 d.type？

Question

我一直在 3.x 版中使用 d.type，例如:

if ( d.type == 'unit' )

但这在 v5 中不起作用，在那里我得到“未定义”。我查看了 v5 中的更改，但看不到任何对 d.type 的引用。

https://github.com/d3/d3/blob/master/CHANGES.md

因此，在 d3 树的 JSON 中，我有一个“类型”字段:

{"name":"MD","children":[{"name":"Professional","type":"theme","children":[{"name":"Professional Behavours","type":"strand","children":[{"name":"Year 1","children":[{"name":"Integrated Medical Sciences 1","type":"unit"},

我正在使用 d.type 返回节点的类型......例如 d.type == 'unit'
见 fiddle这在 d3 v3.5 中工作，其中节点的类型在节点的右键单击时返回。

Answer 1

当使用 d3-hierarchy 时，源层次结构数据中的每个节点都会获得许多与其在层次结构中的位置相关的属性。这些属性包括叶子、祖先等。

当将 d3-hierarchy 的结果传递给布局生成器(例如 d3.tree 或 d3.cluster)时，每个节点都会被进一步修改，使其具有 x 和 y 等属性以允许放置。

为了避免属性名称冲突的可能性并清楚地描述与任何给定节点关联的数据，与节点关联的数据被放置到一个新的 data 中。属性(property)。

因此，如果您的原始数据具有节点属性 type ，一旦它通过 d3 层次结构，此属性现在位于 data.type .所以在你的例子中，你应该使用 d.data.type :

var svg = d3.select("svg")
var tree = d3.tree().size([100,100]);
   
var treeData = {
      "name": "Program", "type":"program",
      "children": [{
        "name": "Unit", "type":"unit",
      }]
    };
    
var root = d3.hierarchy(treeData);
    
svg.selectAll(null)
   .data(tree(root).descendants())
   .enter()
   .append("circle")
   .attr("cx", function(d) { return d.y+100; })
   .attr("cy", function(d) { return d.x; })
   .attr("r",10)
   .on("click", function(d) { console.log(d.data.type); }) 

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg></svg>