Javascript 工具提示上的饼图悬停在多条形图nvd3上

我们可以使用nvd3在条形图的工具提示悬停中显示不同的图形（例如饼图）吗？

下面是一个正在执行此任务的示例。这种方法背后的逻辑如下：

• 禁用默认工具提示
• 准备要用作工具提示的辅助图表（示例中的甜甜圈图表）
• 在主图表（条形图）的回调中，在条形图元素上注册事件侦听器

  • mousemove

    -显示和定位自定义甜甜圈图表工具提示

  • mouseleave

    -隐藏工具提示

var donutContainer=document.getElementById（'donut-chart'）；
瓦沙特甜甜圈；
var chartBar；
nv.addGraph（函数（）{
chartBar=nv.models.discreteBarChart（）
.x（d=>d.label）
.y（d=>d.value）
.margin（{左：80}）
.showValues（真）
.期限（250）；
//禁用默认工具提示
chartBar.tooltip.enabled（false）；
d3.选择（“#主图表svg”）
.基准面（历史条形图）
.call（chartBar）；
nv.utils.windowResize（chartBar.update）；
返回图表条；
}, () => {
//加载图表后，注册一些侦听器
//确定何时显示/隐藏自定义工具提示图表的步骤
变量条=d3。选择全部（'.nv条'）；
bar.on（'mousemove'，函数（bar）{
//当鼠标在横条上移动时
//显示工具提示图表并更新工具提示位置
d3.选择（“#圆环图svg”）
.基准面（钢筋详图）
.呼叫（沙特甜甜圈）；
nv.utils.windowResize（chartDonut.update）；
var e=window.event；
donutContainer.style.display='block'；
donutContainer.style.left=e.clientX+“px”；
donutContainer.style.top=e.clientY-50+“px”；
});
//当鼠标离开工具栏时，隐藏工具提示
on（'mouseleave'，e=>donutContainer.style.display='none'）；
});
//为工具提示准备甜甜圈图表
nv.addGraph（函数（）{
//请注意，此处使用了持续时间（0）。此操作已完成
//因为当你在不同形状的条之间移动光标时
//引发子组计数（例如操作系统和鞋子）错误
chartDonut=nv.models.pieChart（）
.x（d=>d.name）
.y（d=>d.value）
.宽度（150）
.身高（150）
.甜甜圈（对）
.持续时间（0）
.showLegend（假）；
chartDonut.tooltip.enabled（假）；
返回油炸圈饼；
});
//样本数据
常数历史条形图=[{
关键字：'累积回报'，
价值观：[{
标签：“汽车”，
价值：1500000，
详情：[{
名称：“奥迪”，
价值：50万
}, {
名称：“梅赛德斯”，
价值：70万
}, {
名字：'福特'，
价值：30万
}]
}, {
标签：'移动'，
价值：1000000，
详情：[{
名称：“iPhone”，
价值：50万
}, {
名称:"三星",，
价值：410 000
}, {
名称:"联想",，
价值：90000
}]
}, {
标签：“OS”，
价值：1500000，
详情：[{
名称：“OSX”，
价值：50万
}, {
名称：“Windows”，
价值：50万
}, {
名称：“Linux”，
价值：50万
}]
}, {
标签：“鞋”，
价值：1400000，
详情：[{
名称：“Addidas”，
价值：50万
}, {
名称：“Nike”，
价值：50万
}, {
名称：'美洲狮'，
价值：100000
}, {
名字：“某物”，
价值：30万
}]
}]
}];
文本{
字体：12px无衬线；
}
svg{
显示：块；
}
html，
身体，
#主图表，
svg{
身高：100%；
宽度：400px；
}
#油炸圈饼图{
位置：绝对位置；
高度：150像素；
宽度：150px；
背景色：白色；
z指数：1；
指针事件：无；
显示：无；
边框：1px纯黑；
}
可以。但这不是一个好问题。请添加到目前为止您所尝试的示例代码。也读