用D3異步設置svg元素屬性

我使用D3的（v4）TreeLayout繪製數學公式的抽象語法樹。在一些節點中，我嵌入了由MathJax實時渲染的其他SVG，以顯示特殊的Math語法。用D3異步設置svg元素屬性

出現的問題是當我想要在基於異步操作的mainSVG樹中設置節點（圓）-radius以匹配subSVG大小？

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隊列但異步操作的返回值結束了回調以及內...

有什麼想法？

來源

2016-11-15 petulant-slacker

看起來像是你在'（err，subSVG）'之前丟失了最後一個'）'和'function'。 – Arnial

爲什麼不使用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)) 
    })

來源

2016-11-15 19:35:51 Arnial

用D3異步設置svg元素屬性

回答

相關問題