javascript - 线图中的工具提示不显示使用 d3-tip

Question

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

这是我到目前为止得到的:

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);
    }

});

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

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

你能帮忙吗

最好的，

巴特

Answer 1

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

工具提示可能会被所有其他 html 代码“推开”。添加 .style('z-index', '99999999999');将有助于弄清楚这一点。

参见:

 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>"
        });