javascript - 如何在D3中使用资源对象(通过Promise)？

更新：我意识到在游戏后期尝试执行数据库查找是一种糟糕的形式-我更新了代码，以使进入D3的原始数据已经包含了创建图形所需的信息，并且一切正常。

我正在尝试构建一个力导向图，该图在节点元素上执行数据库查找，以获取有关节点的更多信息，以便在图中进行进一步的自定义。

在下面的示例中，我尝试使用FontAwesome字形为节点创建“图标”。现在，在我的getIcon()函数中，正确绘制了节点图标/字形IF，并且仅当我立即返回unicode值时，才绘制该图标。一旦我兑现承诺并等待返回值，事情就会崩溃。 D3在promise有机会返回之前正在构造和渲染图。在解决诺言之后，如何让.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'; }
  });
}

最佳答案

我不确定我是否理解您的承诺，因为您没有使用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)
    })
}