d3.js - 如何将文本附加到 D3 工具提示？

Question

我在将文本附加到 D3 工具提示时遇到问题。生成工具提示的代码会导致以下错误:

Uncaught TypeError: Cannot read property 'Name' of undefined

显示工具提示，但没有任何文本。以下代码用于生成工具提示:

1.创建.toolTip的代码

.toolTip {
position: absolute;
display: none;
min-width: 80px;
height: auto;
background: none repeat scroll 0 0 #ffffff;
border: 1px solid #6F257F;
padding: 14px;
text-align: center;

2.创建变量的代码。

 var tooltip = d3.select("body")
                .append("div")
                .attr("class", "toolTip");

尝试附加到节点的代码

// Nodes
d3.select('svg g.nodes')
.selectAll('circle.node')
.data(root.descendants())
.enter()
.append('circle')
.classed('node', true)
.attr('cx', function(d) {return d.x;})
.attr('cy', function(d) {return d.y;})
.attr('r', 4)
.on("mousemove", function(d){
 tooltip
.style("left", d3.event.pageX - 50 +"px")
.style("top", d3.event.pageY - 70 + "px")
.style("display", "inline-block")
.html(function (d) {return d.Name});
})
.on("mouseout", function(d){ tooltip.style("display", "none");});

Answer 1

让我们看一下 mousemove 上调用的函数:

.on("mousemove", function(d){
   tooltip
    .style("left", d3.event.pageX - 50 +"px")
    .style("top", d3.event.pageY - 70 + "px")
    .style("display", "inline-block")
    .html(function (d) {return d.Name});
})

在第一行中，d in 函数指的是绑定(bind)到 svg 圆的基准，而这里:.html(function(d) { ，d指绑定(bind)到工具提示的数据。在这种情况下，两个 d s 指的不是同一件事。您没有任何数据绑定(bind)到工具提示，因此这不起作用 - d这里未定义，因此您的错误消息:“无法读取未定义的属性‘名称’。”

相反，只需使用圆的基准:

.on("mousemove", function(d){
   tooltip
    .style("left", d3.event.pageX - 50 +"px")
    .style("top", d3.event.pageY - 70 + "px")
    .style("display", "inline-block")
    .html(d.Name); 
})

每当你在 .html 中看到 function(d) 时或.attr d3 选择的方法，您正在访问当前选择的每个元素的数据。您不需要与工具提示关联的数据，因此不需要使用 function(d)在 .html()方法，您已经在第一行中访问了所需的数据。

---

看起来好像您正在使用 d3 分层布局。如果您从以下形式开始，这将改变您的数据结构:

 var data = { "name": "Parent", "children": [ 
    { "name": "Child A", "children": [ { "name": "Grandchild" } ] }, 
    { "name": "Child B", } 
    ] };

d3.hierarchy(data)将返回具有以下结构的数组:

[
 {data: Object, height: number, depth: number, parent: null, children: array[number], x: number, y: number},
 {data: Object, height: number, depth: number, parent: object, children: array[number], x: number, y: number},
  ... and so forth.
]

这样一来，要附加的每个节点的数据数组中都有一个元素(selection.data() 需要一个数组)，并且传递给选择的数据中的每一项都具有一些属性，允许正确定位、连接等。关键点是数据数组中的原始元素现在位于 d.data 。这与 d3.pie 或其他布局生成器相同 - 并避免属性名称之间(原始属性和布局创建的属性之间)的潜在重叠。

对于您来说，主要结果是您的名字不会驻留在 d.Name ，而是d.data.Name这是由 d3.hierarchy() 创建的数据结构。