D3（V4）ツリーのレイアウトとtypescriptです：プロパティ「x」はタイプに存在しません「HierarchyNode <IOrgChartNode>」

Question

例えば、ツリーのレイアウトで 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機能で推論されるためです。 2番目のエラーは、以前に定義されていなかったプロパティがd3.treeに追加されたためです。

タイプセーフティを維持しながらこれにアプローチするにはどうすればよいですか？

ありがとうございます！

P.S.私は、D3のバージョンを使用しています4

Answer 1

ここで起こっていくつかのこと、容易に解決する必要がありますあります

（1）明確にするために、私はあなたの実際のデータ構造がより、このようなものであることを前提としています

interface MyCustomGraphType { 
    id: string; 
    person: { 
    email: string; 
    /*Other Properties*/ 
    }; 
    children?: MyCustomGraphType[]; 
} 

これは、selection.data(...)キー機能のノードのプロキシにアクセスしたことを示しています。

（2）D3定義では、ジェネリック型パラメータを幅広く使用しています。ある場合には、型推論がそれらを容易に提供します。他のものでは、それらは容易に推論することができない。

• 使用d3.tree<MyCustomGraphType>().size([500,500])(root);これは、タイプHierarchyPointNode<MyCustomGraphType>のツリーレイアウトルートポイントを返します。暗示して、nodesはHierarchyPointNode<MyCustomGraphType>[]アレイになります。 D3-選択モジュールから
• select、selectAll、appenddataとは、種々のオーバーロード署名ジェネリックに関する広範JSDocのコメントを有します。コードエディタ（たとえば、VSコード）でマウスオーバーヒントなどのように使用できるようにする必要があります。

（3）dataメソッドの呼び出しエラーアウトキーアクセサは、次のようになる理由：キーアクセサが古いと新しいデータエントリを一致させるために使用されます。古いデータ型は先行するselectAll(...)ステートメントに基づいています。選択された要素のジェネリック型とその "古い"データ型を文字列ベースのセレクタから推測することができない場合は、明示的に設定する必要があります。それ以外の場合、「古い」データ型のデフォルトは{}です。そのため、ユニオンデータ型{} | HierarchyPointNode<MyCustomGraphType>が表示されます。選択された要素の「古い」データ型が、実際に選択された要素とキーアクセッサの間で同期していることに注意する必要があります。キー機能には、必要に応じてエッジケースを処理する方法が必要です。

（4）欠落しているプロパティxまたはyについては、この問題を再現できないようです。 d

attr('transform', d => `translate(${d.x}, ${d.y})`) 

内のデータ型が正しく HierarchyPointNode<MyCustomGraphType>と推察されるように私のために、彼らは、存在しています。

これはうまくいきます。