使用 D3 异步设置 svg 元素属性

Question

我正在使用 D3 的 (v4) TreeLayout 绘制数学公式的抽象语法树。在一些节点中，我嵌入了由 MathJax 实时渲染的其他 SVG，以显示特殊的数学语法。

问题是当我想根据异步操作在mainSVG树中设置节点（圆）-半径以匹配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 但异步操作的 return 值也在回调中结束...

有什么想法吗？

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 元素属性

set svg element property asyncronously with D3

javascript

svg

mathjax

d3.js

使用 D3 异步设置 svg 元素 属性

set svg element property asyncronously with D3

javascript

svg

mathjax

d3.js

使用 D3 异步设置 svg 元素属性