模态时 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>

我也尝试遵循这篇文章中的建议。

有什么办法可以在我当前的设置下将尖端置于前面吗？谢谢！

Answer 1

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

的modal值大于 1 （默认值为 1050），因此您不会在当前的css.