Question

我使用D3＆＃39; s（v4）TreeLayout绘制数学公式的抽象语法树。在某些节点中，我嵌入了由MathJax实时渲染的其他SVG，以显示特殊的数学语法。

出现的问题是，我想根据异步操作在mainSVG树中设置节点（circle）-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-queue，但异步操作的返回值也在回调中结束......

有什么想法吗？

Answer 1

为什么不使用each并在异步调用中设置r。它还可以帮助您避免难以区分的多线箭头lambda函数。

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

与D3一起设置svg元素属性异步

1 个答案: