Javascript 线条图中的工具提示不'；不显示使用d3提示

我有这个折线图，在图中的每个值上我都放了一个点。 当鼠标悬停在点上时，我想使用d3提示工具提示显示该值

以下是我到目前为止得到的信息：

var svg = chart.append("svg")
        .attr("width", outerWidth)
        .attr("height", outerHeight)
        .append("g")
        .attr("transform", "translate(0,10)");

newData.graphSeries.forEach(function (current, index, all) {

    //current = this exact part of the array
    //index = the array index nr [0][1][2] etc
    //all = the complete array
    var graph = current.Values,
        color = current.Color;

    var nextLine = d3.svg.line()
        .interpolate(current.Interpolate)
        .x(function (d) {
            return x(d.x);
        })
        .y(function (d) {
            return y(d.y);
        });

    svg.append("path")
        .datum(graph)
        .attr("transform", "translate(" + yAxisWidth + ",0)")
        .attr("class", "line stroke-" + color)
        .attr("d", nextLine);

    //Placing tooltips
    if (current.Tooltips == true) {

        var tip = d3.tip()
            .attr('class', 'd3-tip')
            .offset([-10, 0])
            .html(function(d) {
                return "<strong> TEST: " + newData.y.Unit + "</strong><span>" + d.x + "</span>"
            });

        //create circles to place the tooltip on
        svg.selectAll('dot')
            .data(graph)
            .enter().append("circle")
            .attr("r", 3,5)
            .attr("style", "cursor: pointer")
            .attr("class", "circle-" + color)
            .attr("transform", "translate(" + yAxisWidth + ",0)")
            .attr("cx", function(d) { return x(d.x) })
            .attr("cy", function(d) { return y(d.y) })
            .on('mouseover', tip.show )
            .on('mouseout', tip.hide);

        svg.call(tip);
    }

});

var svg=chart.append（“svg”）
.attr（“宽度”，外层宽度）
.attr（“高度”，外光）
.附加（“g”）
.attr（“转换”、“翻译（0,10）”）；
forEach（函数（当前、索引、全部）{
//current=阵列的这一精确部分
//index=数组索引nr[0][1][2]等
//全部=完整数组
var图=当前值，
颜色=当前颜色；
var nextLine=d3.svg.line（）
.插值（当前.插值）
.x（功能（d）{
返回x（d.x）；
})
.y（功能（d）{
返回y（d.y）；
});
追加（“路径”）
.基准（图表）
.attr（“转换”、“转换”（+yAxisWidth+”，0）”）
.attr（“类别”、“线条笔划-”+颜色）
.attr（“d”，下一行）；
//放置工具提示
if（current.Tooltips==true）{
var tip=d3.tip（）
.attr（'class'，'d3 tip'）
.偏移量（[-10,0]）
.html（函数（d）{
返回“测试：“+newData.y.Unit+”“+d.x+”
});
//创建圆以放置工具提示
svg.selectAll（'dot'）
.数据（图表）
.enter（）.append（“圆”）
.attr（“r”，3,5）
.attr（“样式”、“光标：指针”）
.attr（“类”，“圆-”+颜色）
.attr（“转换”、“转换”（+yAxisWidth+”，0）”）
.attr（“cx”，函数（d）{返回x（d.x）}）
.attr（“cy”，函数（d）{返回y（d.y）}）
.on（'mouseover'，tip.show）
.on（'mouseout'，tip.hide）；
svg.call（tip）；
}
});

我检查了代码中是否存在d3提示，它确实存在。 我可以console.log提示变量，也可以显示点，甚至mouseover和mouseout都工作正常

不知何故，tip.show似乎不起作用。 我想它可能会显示在文档的其他地方，但在任何地方都看不到

你能帮忙吗

最好的

---

巴特

这个问题实际上比预期的更容易解决

工具提示可能会被所有其他html代码“推”开。 添加.style（'z-index'，'99999999'）；这将有助于澄清这一点

见：

var tip=d3.tip（）
.attr（'class'，'d3 tip'）
.偏移量（[-10,0]）
.style（'z-index'，'9999999'）
.html（函数（d）{
返回“测试：“+newData.y.Unit+”“+d.x+”
});

 var tip = d3.tip()
        .attr('class', 'd3-tip')
        .offset([-10, 0])
        .style('z-index', '99999999')
        .html(function(d) {
            return "<strong> TEST: " + newData.y.Unit + "</strong><span>" + d.x + "</span>"
        });