Javascript D3从.onclick打开引导模式

我有一张D3的图表。我希望能够点击图表的某个部分，打开一个引导模式，传递一些数据。我的d3代码看起来像这样

svg.append("g")
    .attr("class", "stores")
    .selectAll("path")
    .data(data.features)
    .enter().append("path")
    .attr("d", path)
    .on("click", function(d){
        ('#exampleModal').trigger('click')
    }); 

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">

我的html看起来像这样

svg.append("g")
    .attr("class", "stores")
    .selectAll("path")
    .data(data.features)
    .enter().append("path")
    .attr("d", path)
    .on("click", function(d){
        ('#exampleModal').trigger('click')
    }); 

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">

---

我怎样才能在d3图表中的一次单击中打开预创建的引导模式？

我想您实际上必须使用模式所具有的

.show（）

方法，而不是

单击

触发器（或方法）。模式由

显示

或

隐藏

触发。下面是一个简单的例子，我想你也可以把它应用到你的代码中

干杯

var modal=document.getElementById（'myModal'）；
var svg=$（“#mysvg”）；
window.onclick=函数（事件）{
如果（event.target==模态）{
modal.style.display=“无”；
}
}
svg.on（“点击”，功能（d）{
$（“#myModal”）.show（）；
});
/*模式（背景）*/
.莫代尔{
显示：无；/*默认情况下隐藏*/
位置：固定；/*保持原位*/
z指数：1；/*位于顶部*/
填充顶部：100px；/*框的位置*/
左：0；
排名：0；
宽度：100%；/*全宽*/
高度：100%；/*全高*/
溢出：自动；/*根据需要启用滚动*/
背景色：rgb（0,0,0）；/*回退色*/
背景色：rgba（0,0,0,0.4）；/*黑色w/不透明度*/
}
/*模态内容*/
.模态内容{
背景色：#fefe；
保证金：自动；
填充：20px；
边框：1px实心#888；
宽度：80%；
}
/*关闭按钮*/
.结束{
颜色：#AAAAA；
浮动：对；
字号：28px；
字体大小：粗体；
}
.关闭：悬停，
.结束：聚焦{
颜色：#000；
文字装饰：无；
光标：指针；
}

显示收集的水果数量的图表
显示信息的bart图表
4个苹果
8个香蕉
15新西兰人
16个橙子
23个柠檬
&时代；
模态中的一些文本

您能添加
d3.event.stopPropagation（）吗触发模式单击并重试后？我得到错误未捕获类型错误：“#exampleModal”。触发器不是一个函数通过执行
$（“#exampleModal”）触发单击。单击（）或
$（“#示例模态”）。触发器（'click'）请再试一次：）没有任何结果。你不应该模拟点击按钮，而不是模式，因为按钮是打开它的元素吗？