使用3d -tip时,linegraph中的工具提示不显示

Tooltip in linegraph doesn't show using d3-tip

本文关键字:工具提示 显示 linegraph 3d -tip 使用      更新时间:2023-09-26

我得到了这个线形图,在图表中的每个值上我放置了一个点。当鼠标悬停在点上时,我想使用3d -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提示变量,点也显示,甚至鼠标over和鼠标out工作正常。

仍然不知何故提示。这个节目似乎行不通。我想也许它会在文档的其他地方显示,但是在任何地方都看不到。

你能帮我一下吗?

,

巴特

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

工具提示可能被所有其他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>"
        });