Question

我用D3创建了许多图表，每个图表都包含在bootstrap标签元素中。我没有问题为包含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);
})

我可以将文本推送到模态对话的元素中，但我无法访问csv值的数组，例如我可以使用鼠标悬停d.Country，d.Operator。我怀疑是因为我没有使用d3.selectAll来选择对话的#myModal ID，但我似乎无法通过show.bs.modal来识别任何类型的d3.selectAll {1}}陈述。我是否必须通过div中的数据ID分配将所有数据传递给模态，如this problem中所示？我已经尝试过，但是当它附加到SVG元素而不是HTML元素时，bootstrap似乎没有显示数据。

这是问题的Plunker。

Answer 1

你可以这样做：

<强>步骤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.

<强>第二步

在点击功能中，使用课程info获取数据。

$('#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);
})

工作代码here

将D3数据传递给bootstrap模态对话框

1 个答案: