通过使用d3.js单击一个圆圈来显示工具提示 [英] Show tooltip by clicking on a circle using d3.js

问题描述

我正在生成一个带有ForeignObject的工具提示，当我单击该圆圈时，检查并检查了ForeignObject出现在应去的位置，但未显示.如何显示它?

I am generating a tooltip with a foreignObject, when I click on the circle it is checked that the foreignObject appears where it should go, but it is not displayed. How can I make it show?

https://plnkr.co/edit/C0fODNtfbBw4v37Sb1CT?p=preview

 var div= svg.append('foreignObject')
    .attr("width", 100)
    .attr("height", 100)
    .append("xhtml:div")
    .attr("class", "tooltip")
    .style("opacity", 1);
    div.append('img').attr("id", "img_tweet").attr("src", "").attr("class", "imagen_tweet");
    div.append('div').attr("id", "texto_tweet");

        //add circle on map
        var coordenadas=map.latLngToLayerPoint([coordinates[0].lat,coordinates[0].long]);
            svg.append('circle').attr("cx",position.x)
            .attr("cy", position.y)
            .attr("r", 30)
            .style("fill",'red')
            .style('pointer-events', 'all')
            .attr("class",'circulo_mapa')
            //click event
            .on("click", function(element){
           document.getElementById('img_tweet').src='https://www.amrita.edu/sites/default/files/news-images/new/news-events/images/l-nov/grass.jpg';
           document.getElementById('texto_tweet').innerHTML='this is a message';
           var coordenadas=map.latLngToLayerPoint([coordinates[0].lat,coordinates[0].long]);
           d3.select('foreignObject').style("opacity", .9)
        //.html(tweet_recibido[index].texto)
           .attr("x",coordenadas.x)
           .attr("y",coordenadas.y )
        })

推荐答案

您是否检查了所涉及元素的z-index? 可能在那儿，但在其他所有东西的下面. 请让我知道.

have you checked the z-index of the element in question? It's possible it's there, but it's underneath everything else. Please let me know.

这篇关于通过使用d3.js单击一个圆圈来显示工具提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！