Question

更新：我意识到在游戏后期尝试执行数据库查找的形式很差 - 我更新了我的代码，以便我的原始数据进入D3已包含我需要的信息创建我的图表，一切都按预期工作。

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

在下面的示例中，我尝试使用FontAwesome字形来创建＆＃39;图标＆＃39;为我的节点。现在，在我的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'; }
  });
}

Answer 1

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

Answer 2

虽然我从未使用过D3，但我认为你需要先调用getIcon，然后在promise回调中执行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参数将无法使用。

如何在D3中使用资源对象（通过promises）？

2 个答案: