我正在尝试在我的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产生误差
3条答案
按热度按时间ykejflvf1#
TypeScript具有contextual type inference，并且由于HierarchyNode不导出“x”和“y”属性，因此无法编译。可以使用“any”作为输入类型以避免此错误：
rdlzhqv92#
您可以显式指定要覆盖上下文类型化的类型
7tofc5zh3#
我遇到了同样的问题。虽然zokar.com的答案解决了这个问题，但是它破坏了类型检查。问题的起因是在treemap（root）之后，树中的节点被添加了x和y属性。它们应该被类型化为HierarchyPointNode而不是HierarchyNode。但是treemap不能正确地转换类型。你可以使用类型Assert来纠正它：