是否可以使用另一个d3图表的鼠标悬停元素显示d3图表

Question

我创建了一个折线图，其中有一个工具提示，显示图表中该点的值。我还希望工具提示将页面的另一部分从某些单词更改为显示另一个d3图表。我一直在尝试使用以下功能：

function linechange(txt5) {
document.getElementById('name5').innerHTML = txt5;
}

我知道我想要调用的d3图表就像我放的那样：

<div id="contract"></div>

在我的页面正文中显示。但是，只要我尝试将其放在上面的函数中并在鼠标悬停中调用该函数，它就不会显示。 disapper这个词，当我检查元素时div就在那里但不是图表。

我的问题是这是否可行？或者我只是个白痴！ （后者更有可能因为我仍然试图了解html / d3 / javascript）

Answer 1

如果我正确理解了您的问题，您只需要切换div的display样式。

首先将div代码放在您的身体中，但将其显示样式设置为＆＃34; none＆＃34;在css或style属性

中

<div id="contract" style="display:none;"></div>

然后将其插入你的mousover函数

d3.select("#contract").style("display","inline-block")

您可能需要使用inline-block以外的其他内容，具体取决于您希望div在您的网站中显示的方式。

然后，您可能需要在鼠标输出时将显示设置为无

d3.select("#contract").style("display","none")