Angular-4 d3 v4 问题 : Property 'x' does not exist on type 'HierarchyNode'

Question

我正在尝试在我的 Angular 应用程序中创建一个 d3 树，我正在尝试这个例子: https://bl.ocks.org/d3noob/08ecb6ea9bb68ba0d9a7e89f344acec8

尝试访问节点 x-y 坐标时存在问题，我得到错误: 类型“HierarchyNode”上不存在属性“x”

当我记录数据时，我可以看到 x-y 坐标在那里。 Screenshot showing the logged data

  // declares a tree layout and assigns the size
  var treemap = d3.tree()
    .size([this.height, this.width]);

  //  assigns the data to a hierarchy using parent-child relationships
  var nodes = d3.hierarchy(this.treeData, function(d) {
    return d.children;
    });
  // maps the node data to the tree layout
  nodes = treemap(nodes);
console.log(nodes.descendants());
  // adds each node as a group
  var node = g.selectAll(".node")
    .data(nodes.descendants())
    .enter().append("g")
    .attr("class", function(d) { 
      return "node" + 
        (d.children ? " node--internal" : " node--leaf"); })
    .attr("transform", function(d) { 
      return "translate(" + d.x + "," + d.y + ")"; });

d.x & d.y 产生错误

Answer 1

TypeScript 有 contextual type inference ，并且由于 HierarchyNode 不导出 'x' 和 'y' 属性，因此无法编译。您可以使用 'any' 作为输入类型来避免错误:

...
.attr("transform", function(d: any) { 
  return "translate(" + d.x + "," + d.y + ")"; });