使用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吗？ 它可能在那里，但它在其他一切之下。 请告诉我。