如何使用d3js的数据方法解析对象数组并在工具提示中显示？

Question

我正在尝试使用 d3 js 在强制有向图中的特定节点悬停时实现工具提示。

当前行为：正在加载工具提示，但文本显示不正确，显示的是 [object object] 消息而不是正确的文本消息。

预期结果：工具提示应显示以下格式的文本：

Item Name: 'Item1',
Item Id: 'Item1',
Supplier: 'Supplier1'

如何实现？

工作fiddle：Tool tip

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');
}

Answer 1

每个 <div> 的数据是一个对象，您正试图将整个对象传递给 text() 方法，因此您看到的结果。

最好的办法是在 text() 方法中处理对象，准确指定要显示的内容（键和值）以及显示方式。同时，一个非常简单和幼稚的解决方案是：

.text(function (d, i) { 
    return Object.entries(d)[0].join(": ");
});

这是分叉的 JSFiddle：https://jsfiddle.net/ou85b3n1/

Answer 2

你可以这样做：

return `${Object.keys(d)[0]}: ${d[Object.keys(d)[0]]}`

而不是：

return d

在你的showToolTip函数中

您收到此错误（这是预期行为）是因为您返回的是完整的对象而不是字符串。

Fiddle

Answer 3

  function showToolTip(selectedNode) {
        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.append('div').text(`Item: ${selectedNode.name}`);
        tooltip.append('div').text(`Item Id: ${selectedNode.id}`);
        tooltip.append('div').text(`Status: Normal`);
        tooltip.append('div').text(`Supplier: Supplier1`);
  }

https://jsfiddle.net/nh4fdw03/1/

如何使用d3js的数据方法解析对象数组并在工具提示中显示？

How to parse an array of objects using data method of d3js and display it in tool tip?

javascript

d3.js

d3-force-directed