Twitter bootstrap 将D3数据传递到引导模式对话框

我正在用D3创建许多图表，每个图表都包含在引导选项卡元素中。我可以为包含D3.csv导入数据集元素的图表元素创建数据丰富的鼠标盖/工具提示。但是，当我创建一个引导模式对话框，当用户单击图表元素时启动该对话框时，我得到了该对话框，但无法将D3数据传递给它。“基本模式”对话框如下所示：

<div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title"></h4>
            </div>
            <div class="modal-body">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

&时代；
接近

在javascript中使用

// open modal dialogue on click
$('#myModal').on('show.bs.modal', function(d) {
    let modalTitle = d3.selectAll("h4.modal-title");
    modalTitle.text("test");
    let modalBody = d3.selectAll(".modal-body");
    modalBody.html("Country should be: " + d.Country + "<br>" + "Operator should be: " + d.Operator);
    console.log("operator: " + d.Operator + "   Country: " + d.Country);
})

//单击打开模式对话框
$（'#myModal'）.on（'show.bs.modal'，函数（d）{
让modalTitle=d3.selectAll（“h4.modal title”）；
模型文本（“测试”）；
让modalBody=d3。选择全部（“.modalBody”）；
html（“国家应为：+d.Country+”
“+”运算符应为：+d.Operator）；
控制台日志（“操作员：+d.操作员+”国家：+d.国家）；
})

我可以将文本推送到模式对话的元素中，但我无法访问csv值数组，例如我可以用鼠标覆盖的

d.Country

，

d.Operator

。我怀疑这是因为我没有使用

d3.selectAll

来选择对话的

#myModal

ID，但我似乎无法让它识别带有任何类型的

d3.selectAll

语句的

show.bs.modal

。我是否必须通过div中的数据id分配将所有数据传递给modal，如中所示？我已经尝试过了，但是当bootstrap附加到SVG元素（而不是HTML元素）时，它似乎无法拾取数据

---

下面是问题的一个简单例子

您可以这样做：

步骤1

在鼠标悬停函数中，添加数据和类以供选择

    h.append("rect")
        .style("stroke", "black")
        .style("stroke-width", "4")
        .style("fill", "none")
        .style("stroke-linecap", "round")
        .style("stroke-linejoin", "round")
        .attr("class", "infoLine info")<---add class info
        .datum(d)<---add datum to the rect.

---

工作代码

太棒了。工作得很有魅力。我永远不会解决这个问题。非常感谢。

$('#myModal').on('show.bs.modal', function(d) {
    var d = d3.select(".info").data().pop(); <--- get the data from group having class info
    let modalTitle = d3.selectAll("h4.modal-title");
    modalTitle.text("test");
    let modalBody = d3.selectAll(".modal-body");
    modalBody.html("Country should be: " + d.Country + "<br>" + "Operator should be: " + d.Operator);
    console.log(d, "operator: " + d.Operator + "   Country: " + d.Country);
})