如何在D3中使用資源對象（通過promise）？

Question

更新：我意識到，試圖對數據庫執行查詢這在遊戲中後期是拙劣的形式 - 我更新了我的代碼，使我進入D3的原始數據已包含我需要創建我的圖表中的信息和一切按預期工作。

我試圖建立一個力向圖執行節點元素數據庫查找來獲得有關在該圖進一步定製該節點的附加信息。

在下面的示例中，我嘗試使用FontAwesome glyphs爲我的節點創建「圖標」。現在，在我的getIcon()函數中，我正確繪製了節點圖標/字形IF和ONLY，如果我立即返回unicode值。一旦我承諾並等待返回價值，事情就會崩潰。在承諾有機會返回之前，D3正在構建和渲染圖。我如何才能讓.text(getIcon)等待在我們解決了我的承諾之後纔將文本（字形圖標）附加到節點？

node.append('text') 
    .attr('text-anchor', 'middle') 
    .attr('dominant-baseline', 'central') 
    .style('font-family','FontAwesome') 
    .style('font-size','24px') 
    .text(getIcon) 
    .style('fill', function (d) { 
    return color(d.group); 
    }); 

getIcon()定義如下：

function getIcon(d) { 
    myPromise.then(function(data) { 
    if(data.value) { 
     return '\uf108'; 
    } else { return '\uf233'; } 
    }); 
} 

Answer 1

雖然我從來沒有在D3的工作，但我認爲你需要首先調用和調用getIcon然後做node.append邏輯的承諾回調。類似於

getIcon().then(function(data) { 
    node.append('text') 
    .attr('text-anchor', 'middle') 
    .attr('dominant-baseline', 'central') 
    .style('font-family','FontAwesome') 
    .style('font-size','24px') 
    .text(data) 
    .style('fill', function (d) { 
    return color(d.group); 
    }); 
}); 

但我意識到d參數將不可用。

Answer 2

我不知道我理解你的諾言，因爲你不使用d和你沒有共享你的承諾的聲明，但也許這是你所需要的結構類型...

node.append('text') 
    .attr('text-anchor', 'middle') 
    .attr('dominant-baseline', 'central') 
    .style('font-family','FontAwesome') 
    .style('font-size','24px') 
    .each(getIcon) 
    .style('fill', function (d) { 
     return color(d.group); 
    }); 
function getIcon(d) { 
    var node = this; 
    var myPromise = new Promise(function(resolve, reject){ 
     d3.json("data.json", function(error, glyphs){ 
      if(error || glyphs[d.char] === "undefined") reject('\uf233'); else resolve(glyphs[d.glyph]); 
     }) 
    }); 
    myPromise.then(function(glyph) { 
     d3.select(node).text(glyph) 
    }).catch(function(defaultGlyph){ 
     d3.select(node).text(defaultGlyph) 
    }) 
}