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)) 
    })