我正在尝试使用d3 js在力向图中的特定节点上悬停实现工具提示。
当前行为：工具提示已加载，但文本显示不正确，它显示的是[对象对象]消息，而不是正确的文本消息。
预期结果：工具提示应以以下格式显示文本：
Item Name: 'Item1',
Item Id: 'Item1',
Supplier: 'Supplier1'
如何实现呢？
工作提琴：工具提示
function showToolTip(selectedNode) {
var itemDetails = [
{'Item': selectedNode.name},
{'Item Id': selectedNode.id},
{'status': 'Normal'},
{'Supplier': 'Supplier1'},
];
tooltip.transition().duration(200).style('visibility', 'visible')
.style('position', 'absolute').style('left', (d3.event.pageX) - 15 + 'px').style('top', (d3.event.pageY - 10) + 'px');
tooltip.selectAll('div').data(itemDetails).enter().append('div').text(function (d, i) { return d; });
}
function hideTooltip() {
tooltip.selectAll('*').remove();
tooltip.transition().duration(500).style('visibility', 'hidden');
}
每个<div>对象的基准都是一个对象，您正尝试将整个对象传递给该text()方法，因此将看到结果。
最好的想法是处理text()方法中的对象，准确指定要显示的内容（键和值）以及操作方式。同时，一个非常简单且幼稚的解决方案是：
.text(function (d, i) {
return Object.entries(d)[0].join(": ");
});
这是分叉的JSFiddle：https ://jsfiddle.net/ou85b3n1/
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句