Javascript 工具提示在初始打印上不起作用，但在打印更改后开始起作用

我有一个奇怪的问题；我在d3中有工具提示，在散点图上工作。它们在最初的情节上根本不起作用。鼠标悬停事件甚至不起作用；我有这些的控制台日志

散点图在每个轴上有三组数据。当我选择另一组数据时，工具提示开始工作

当我返回到原始数据时，工具提示也会起作用。如果有人可以查看，网站将在此处发布：

我将工具提示设置为：

// Set up the tool tip
var tool_tip = d3.tip()
    .attr("class", "d3-tip")
    .offset([-8, 0])
    .html(d => `<strong>${d.state}</strong><br>${optionListXTitle[optionX]}: ${d[optionListX[optionX]]}<br>${optionListYTitle[optionY]}: ${d[optionListY[optionY]]}`);

// Link the tool tip to the chart
chartGroup.selectAll(".stateCircleTrans").call(tool_tip);

// Set up the listeners
chartGroup.selectAll(".stateCircleTrans")
        .on("mousemove", function (d) { console.log(`d: ${JSON.stringify(d)}`); tool_tip.show(d, this);})
        .on("mouseover", function (d) { console.log(`d: ${JSON.stringify(d)}`); tool_tip.show(d, this);})
        .on("mouseout", function (d) { tool_tip.hide(d);});c

---

基本上，每个声明的属性（“类”）都放在转换之上。

在

app.js

文件中：

// Add all of the new circles
transCircles.enter().append("circle").transition(t)
    .attr("cx", d => x(d[optionListX[optionX]]))
    .attr("cy", y(0))
    .attr("r", circleRadius)
    .attr("class", "stateCircleTrans")
    .attr("fill-opacity", 0.0)
    .transition(t)
    .attr("fill-opacity", 0.0)
    .attr("cy", d => y(d[optionListY[optionY]]));

改为：

// Add all of the new circles
transCircles.enter()
    .append("circle")
    .attr("class", "stateCircleTrans") // <---- class the element before the transition
    .transition(t)
    .attr("cx", d => x(d[optionListX[optionX]]))
    .attr("cy", y(0))
    .attr("r", circleRadius)
    .attr("fill-opacity", 0.0)
    .transition(t)
    .attr("fill-opacity", 0.0)
    .attr("cy", d => y(d[optionListY[optionY]]));

.aText{
字体系列：无衬线；
字体大小：16px；
文本锚定：中间；
}
.主动{
字体大小：粗体；
字体大小：16px；
填写：#000；
过渡：填写0.3s的缓和值；
文本锚定：中间；
}
.不活跃{
字体重量：较轻；
字体大小：16px；
填充：#c9c9c9；
过渡：填写0.3s的缓和值；
文本锚定：中间；
}
。非活动：悬停{
填写：#000；
光标：指针；
}
/*字体大小取决于半径，请参见app.js*/
.stateText{
字体系列：无衬线；
填充：#fff；
文本锚定：中间；
}
.州议会{
填充：#89bdd3；
冲程：#E3；
}
.stateCircleTrans{
填充：#89bdd3；
填充不透明度：0；
冲程：#E3；
指针事件：全部；
}
.图表{
显示：块；
保证金：0；
}
.d3提示{
填充：6px；
字体大小：12px；
线高：1；
颜色：#fff；
文本对齐：居中；
文本转换：大写；
背景：rgba（0,0,0,0.8）；
边界半径：4px；
}
/*为工具提示创建一个小三角形延长线*/
/*.d3提示：之后{
框大小：边框框；
显示：内联；
字体大小：10px；
宽度：100%；
线高：1；
颜色：rgba（0,0,0,0.8）；
内容：“\25BC”；
位置：绝对位置；
文本对齐：居中；
偏移量：0-30；
} */
.回归{
笔画宽度：2px；
笔画：钢蓝；
行程数组：10,5；
}
.方程式{
字体大小：12px；
边缘顶部：10px；
文本对齐：居中；
}
/*移动规则*/
@媒体屏幕和屏幕（最大宽度：530像素）{
.stateText{
显示：无；
}
.aText{
字体大小：14px；
}
}
@媒体屏幕和屏幕（最大宽度：400px）{
.aText{
字体大小：13px；
}
}

第三次

发现健康风险与年龄、收入之间的相关性
佩伦特式的居住者morbi tristique Sentecus et netus et malesuada是著名的turpis egestas。前庭斜颈
夸姆，封建主义者，别有用心者，临时法官，安特。不要让你的自由人坐在那里。埃尼安
我生命中的别有用心。莫里斯·普莱斯特拉特·埃利芬德·利奥

正如我们在前面的评论中所讨论的，问题是类在转换后被声明：

    // Add all of the new circles
    transCircles.enter().append("circle").transition(t)
    ...
    .attr("class", "stateCircleTrans")

    // Add all of the new circles
    transCircles.enter().append("circle")
    .attr("class", "stateCircleTrans").transition(t)
    ...

发生这种情况的原因是，“选择”对象在引入转换时成为“转换”对象。转换对象与选择对象略有不同，因为声明的属性仅在转换结束后达到其定义的值。在过渡期间，属性处于插值状态，并不断更改以创建动画

在转换后声明类时，D3尝试将

未定义的
（因为从未定义过类）插入
“stateCircleTrans”
（转换的目标）。虽然未定义和字符串之间不支持插值，但D3确实执行转换中的更改；只是不顺利

这就是为什么错误只发生在第一次渲染中。此时，转换没有时间执行，当第一次执行以下行时，类仍然是未定义的：

    // Link the tool tip to the chart
    chartGroup.selectAll(".stateCircleTrans").call(tool_tip);

所选内容为空，因为没有
”。stateCircleTrans“
（尚未！）

在随后的运行中，D3已经完成了转换，并且状态永远不会返回到
未定义，
。这意味着转换将尝试将
“.stateCircleTrans”
插入到
“.stateCircleTrans”
，这很简单，不再更改类，从而使
“.stateCircleTrans”
选择对程序的其余部分有效

与转换相反，通过在选择对象中声明类可以避免此问题：

    // Add all of the new circles
    transCircles.enter().append("circle").transition(t)
    ...
    .attr("class", "stateCircleTrans")

    // Add all of the new circles
    transCircles.enter().append("circle")
    .attr("class", "stateCircleTrans").transition(t)
    ...

这会立即将“stateCircleTrans”类应用于圆圈，使d3提示调用从一开始就始终有效。
请发布您尝试过的代码块。我简要查看了代码。尝试将
.attr（“class”，“stateCircleTrans”）
移动到
.transition（t）
之前。如果这是一个问题，请让我知道，以便我可以在回答中详细说明。如果不重放错误，那只是猜测，请考虑加入这是个问题；我只是好奇为什么这样做有效？非常感谢你的帮助！我从Robin Mackenzie提供的链接中得到了答案。谢谢你的帮助，我很高兴它帮助了你。虽然@RobinMackenzie给出了工作示例的答案，但我添加了另一个答案来解释选择对象和转换对象之间的差异，以及为什么问题只在第一次渲染时发生；我只是好奇为什么这样做有效？非常感谢你的帮助！我从Robin Mackenzie提供的链接中得到了答案。感谢您的帮助。@SeangAllowy-如果它对您有效，您可以勾选答案。@RobinMackenzie感谢您引用我的评论并添加了工作示例。我添加了另一个答案来详细说明D3中选择对象和过渡对象之间的区别，并解释为什么它只是第一次渲染中的一个问题。