- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用?
- database - RESTful URI 是否应该公开数据库主键?
我在使用 d3.hierarchy
时尝试使用正确的 ts 类型具有树状布局的根,例如:
interface MyCustomGraphType {
id: string;
children?: MyCustomGraphType[]
}
let treeData: MyCustomGraphType = {/*...*/};
let root = d3.hierarchy(treeData);
let layout = d3.tree().size([500,500])(root);
let nodes = layout.descendants();
// BIND DATA (Node)
let node = this.nodesGroup.selectAll('g.node')
.data(nodes, d => d.data.person.email); // <--- compile-time error
// ^^^ Property 'data' does not exist on type '{} | HierarchyNode<MyCustomGraphType>'.
// ... later:
node.enter()
.append('circle')
.attr('transform', d => `translate(${d.x}, ${d.y})`); // <--- compile-time error
// ^^^ Property 'y' does not exist on type '{} | HierarchyNode<MyCustomGraphType>'.
显然第一个错误是因为联合类型 '{} | HierarchyNode<MyCustomGraphType>'
出于某种原因在 key
中推断功能。第二个错误是由于 d3.tree
添加以前未在此处定义的属性。
在保持类型安全的同时解决这个问题的干净方法是什么?
谢谢!
附言我正在使用 d3 版本 4
最佳答案
这里发生了一些事情,应该很容易解决:
(1) 澄清一下,我假设您的实际数据结构更像是这样:
interface MyCustomGraphType {
id: string;
person: {
email: string;
/*Other Properties*/
};
children?: MyCustomGraphType[];
}
这将解释您访问 person.email
selection.data(...)
中节点的属性关键功能。
(2) D3 定义广泛使用泛型类型参数。在某些情况下,类型推断会很容易地为他们服务。在其他情况下,它们不能轻易推断出来。
d3.tree<MyCustomGraphType>().size([500,500])(root);
这将返回类型为 HierarchyPointNode<MyCustomGraphType>
的树布局根点。 .言外之意nodes
现在将是 HierarchyPointNode<MyCustomGraphType>[]
数组。select
, selectAll
, append
和 data
来自 d3-selection 模块的 JSDoc 对各种重载签名的泛型有广泛的评论。它们应该在代码编辑器(例如 VS Code)中以鼠标悬停提示或类似方式提供。(3) data
中key accessor的原因方法调用错误出来,如下: key accessor 用于匹配old 和new 数据条目。旧数据类型基于前面的selectAll(...)
陈述。鉴于所选元素的通用类型及其“旧”数据类型无法从基于字符串的选择器中推断出来,因此必须明确设置它们。否则,“旧”数据类型默认为 {}
.这就是您看到联合数据类型 {} | HierarchyPointNode<MyCustomGraphType>
的原因.必须注意所选元素的“旧”数据类型在实际所选元素和键访问器之间是同步的。如果需要,关键函数应该有办法处理边缘情况。
(4) 至于缺失的属性x
或 y
,我似乎无法复制这个问题。对我来说,它们作为 d
的数据类型存在在
attr('transform', d => `translate(${d.x}, ${d.y})`)
被正确推断为 HierarchyPointNode<MyCustomGraphType>
.
希望这能解释。
关于typescript - d3 (v4) 树布局和 typescript : Property 'x' does not exist on type 'HierarchyNode<IOrgChartNode>' ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45356346/
我在 SQL 查询中使用了一个简单的 IF NOT EXISTS/WHERE NOT EXISTS 语句(我都尝试过),但我总是收到 mysql 错误,不知道为什么。尝试使用不同的引号,检查我的 My
我有 2 个表:tbl1 和 tbl2。我想从 tbl1 返回一行,其中包含以下列:col1、col2、col3、can_be_deleted 、有重要项目。这个想法是,can_be_deleted
如果您是 "t1".persona_1_id = 2,则预期结果应返回 persona_id = 4。 like --- id persona_1_id persona_2_id liked 1 2
我遇到了这个用于执行幂等插入的 github SQL 代码示例。完全按照我想要的方式工作。我不想使用 EXISTS,因为我觉得它有点困惑。可以使用联接对相同的操作进行编码吗? 下面是我在 github
public bool CheckTblExist(string TblName) { try { string cmTxt = "s
表1 Id Name DemoID 1 a 33 2 b 44 3 c 33 4 d 33 5 e 44 表2 Id DemoID IsT
我对 SQL 非常陌生。我想知道当我使用“IF EXISTS”或“IF NOT EXISTS”时会发生什么。例如:以下两个语句有什么区别: 语句 1:(存在) IF EXISTS( SELECT OR
我正在更新 exist-db 集合中的 XML 文件,我必须检查是否存在 id 以决定是否必须在我的文档中替换或插入某些内容。 我注意到随着文件的增长,查询执行时间显着恶化,我决定为我的文件添加一个索
我有一个正在尝试更新的数据库,但我不明白为什么会收到有关不存在的列的奇怪错误。当我使用“heroku pg:psql”访问数据库时,我完全可以看到该列。我找到了couple其他questions遇到类
我有一个这样的查询 SELECT ... FROM ... WHERE (SELECT EXISTS (SELECT...)) which did not return anything th
我有一个可以对数据库执行插入和更新的程序,我从 API 获取数据。这是我得到的示例数据: $uname = $get['userName']; $oname = $get['offerNa
我的批处理文件中有这个脚本 -- if not exist "%JAVA_HOME%" ( echo JAVA_HOME '%JAVA_HOME%' path doesn't exist) -
有没有办法让 Directory.Exists/File.Existssince 区分大小写 Directory.Exists(folderPath) 和 Directory.Exists(folde
考虑使用这两个表和以下查询: SELECT Product. * FROM Product WHERE EXISTS ( SELECT * FROM Codes
我正在使用 Subclipse 1.6.18 使用 Eclipse 3.72 (Indigo) 来处理 SVN 1.6 存储库。这一切都在 Ubuntu 下运行。 我有一个项目,在我更新我的 Ecli
我正在尝试使用 Terraform 配置 Azure 存储帐户和文件共享: resource "random_pet" "prefix" {} provider "azurerm" { versi
我有兴趣为需要使用 NOT EXISTS 的应用程序编写查询。子句来检查一行是否存在。 我正在使用 Sybase,但我想知道一般 SQL 中是否有一个示例,您可以在其中编写具有 NOT EXISTS
我正在尝试使用 Terraform 配置 Azure 存储帐户和文件共享: resource "random_pet" "prefix" {} provider "azurerm" { versi
下面是代码示例: CREATE TABLE #titles( title_id varchar(20), title varchar(80)
我曾经这样编写 EXISTS 检查: IF EXISTS (SELECT * FROM TABLE WHERE Columns=@Filters) BEGIN UPDATE TABLE SET
我是一名优秀的程序员,十分优秀!