在模态中，D3-tip在图形后面

Question

这是我对d3.js的第一次尝试，我对d3-tip函数的问题很小。一张图片胜过千言万语，所以这是我的问题。

d3-tips工作正常，直到我把我的图形放在一个模态中。我尝试过css z-index作为d3-tip风格的一部分：

 .d3-tip {
        line-height: 1;
        font-weight: bold;
        padding: 12px;
        background: rgba(0, 0, 0, 0.8);
        color: #fff;
        border-radius: 2px;
        z-index: 1;
    }

这没有任何效果，在我有限的CSS知识中，我认为z-index仍然使用我的主体作为关系键。

以下是我的var tip设置：

       var tip = d3.tip()
           .attr('class', 'd3-tip')
           .offset([-10, 0])
           .html(function(d) {
             return "<strong>Date:</strong> <span style='color:red'>" + d.date + "</span></br><strong>Time:</strong> <span style='color:red'>" + d.time + "</span>
                        </br><strong>Around:</strong> <span style='color:red'>" + d.timeGroup + "</span>";
        });     

这是我的模态：

 <div id="modal-barGraph" class="modal flex-child fade" role='dialog'>
    <div class="modal-dialog">

        <button class="close white" aria-hidden='' data-dismiss="modal" type="button">X</button>
        <div id="barGraph" ></div>

    </div>
</div>

我也尝试过关注此post的建议。

有没有办法让我的当前设置提示前端？谢谢！

Answer 1

将当前css z-index更改为z-index: 10000

modal的值大于1（默认值为1050），因此您无法使用当前css看到它。