svg要素プロパティをD3と非同期で設定する

Question

D3（v4）TreeLayoutを使用して、数式の抽象構文ツリーを描画しています。 ノードの中には、特殊な数式構文を表示するためにMathJaxでレンダリングされた他のSVGをリアルタイムで埋め込みました。

subSVGサイズと一致する非同期操作に基づいてmainSVGツリーにノード（円）-radiusを設定する場合に問題が発生しますか？

let mainSVG = *appendMainSVG* 
... 

node.append('circle') 
    .attr('r', (d) => { 
     CustomES6Class.renderSubSVG(d.data.mathml, (err, subSVG){ 
     mainSVG.append('g') 
       .attr('transform', `translate(${d.x},${d.y})`) 
       .html(subSVG); 
     const subSVGWidth = subSVG.attr('width'); 
     ____________________________________________ 
     I NEED subSVGWidth to be returned to attr(r) 
     but I am inside an async callback 
     ____________________________________________ 
     }) 
    } 

任意の考え

...私はD3-キューに出くわしたが、非同期操作の戻り値は、同様に、コールバックの内側に終わりますか？

Answer 1

eachを使用せず、非同期呼び出し内にrを設定してください。それはまた、複数の矢印のラムダ関数を区別するのが難しいから救います。

node.append('circle') 
    .each(function(d){ 
     CustomES6Class.renderSubSVG(d.data.mathml, function(err, subSVG){ 
     mainSVG.append('g') 
       .attr('transform', `translate(${d.x},${d.y})`) 
       .html(subSVG); 
     const subSVGWidth = subSVG.attr('width'); 
     d3.select(this).attr('r', subSVGWidth); 
     }.bind(this)) 
    })