Question

我尝试在d3.js的工具提示中显示异步函数返回的值。该函数很好地返回了值，但是当我必须显示工具提示时，它包含[object Promise]而不是值。

我使用async / await来处理如下异步函数：

创建工具提示将包含的数据：

async function jsonMethodsArray(d) {
var arr = [];
// $.getJSON is asynchronous
// so wait until the end of its execution before proceeding to the other instructions
var json = await $.getJSON("method/data" + d.id + ".json", function(json) {
    for (var i = 0; i < json.nodes.length - 1; i++) {
        var node = json.nodes[i+1];
        arr.push(node.id);
    }
});
return arr;
}

创建并调用工具提示：

var tooltip = d3.tip()
.attr("class", "tooltip")
.offset([-8, 0])
.html(async function(d) {
    // jsonMethodsArray is asynchronous due to $.getJSON
    // so wait until the end of its execution before proceeding to the other instructions
    var methods = await jsonMethodsArray(d);
    console.log(methods);
    return methods.join("\n");
});
svg.call(tooltip);

显示或隐藏工具提示：

.on('mouseover', tooltip.show)
.on('mouseout', tooltip.hide)

它不显示工具提示中返回的数组的值，而是显示[object Promise]。

我是Javascript，d3.js和异步函数的初学者，您能帮我吗？

Answer 1

请查看以下链接d3 documentation。在这些示例之后，您将在初始化时将工具提示内容放入变量中。

执行：var methods = await jsonMethodsArray(d);。

将附加方法附加到工具提示元素

d3.js工具提示显示“ [object Promise]”而不是值

1 个答案: