javascript - 使用 d3.js 单击圆圈来显示工具提示

Question

我正在使用foreignObject生成一个工具提示，当我单击圆圈时，会检查foreignObject是否出现在它应该去的地方，但它没有显示。我怎样才能让它显示出来？

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

Answer 1

您检查过相关元素的 z-index 吗？ 它可能就在那里，但它位于其他一切之下。 请告诉我。