javascript - d3 如何将图像添加到图节点的标签上？

Question

我已经制作了项目的快速独立部分来向您展示我的问题。我有这个圆圈代表图表中的一个节点，我想要的是将鼠标悬停在一个显示一些文本和图像的框上。到目前为止，我已经有了节点、框和文本。我的问题是图像没有出现，只有专用于图像的空间边框，内部没有任何内容。 我不知道我是否使用了正确的附加顺序？
我使用的是最初创建的 div，它是不可见的，然后我创建了圆圈并为鼠标悬停事件绑定(bind)了一个监听器。监听器将文本字段和图像附加到 div。对于图像，它提供了 href 属性，并且在鼠标移开时，它使 div 再次不可见。你能帮我找出这一切出了什么问题吗......谢谢!

    //the box, invisible for now
    var tooltip = d3.select("body")
.append("div")
.style("position", "absolute")
.style("z-index", "10")
    .style("width","60px")                  
    .style("height","28px")                 
    .style("padding","2px")             
    .style("font","12px sans-serif")
    .style("border","0px")      
    .style("border-radius","8px")  
    .style("background", "lightsteelblue")
.style("visibility", "hidden");

    //the svg container
    var svg = d3.select("body").append("svg")
        .attr("width", 500)
        .attr("height", 500);

    //the node        
    svg.append("circle")
        .attr("class", "logo")
        .attr("cx", 225)
        .attr("cy", 225)
        .attr("r", 20)
        .on("mouseover", function(d){
            tooltip.text("some text"); 
            tooltip.append("image")
                    .attr("href","https://github.com/favicon.ico")
                    .attr("x", -8)
                    .attr("y", -8)
                    .attr("width","16px")                  
                    .attr("height","12px"); 
            tooltip.style("visibility", "visible");
        })
        .on("mousemove", function(){return tooltip.style("top", (event.pageY-                   
                                      10)+"px").style("left",(event.pageX+10)+"px");})
        .on("mouseout", function(){return tooltip.style("visibility", "hidden");});

Answer 1

您需要将image更改为img，将href更改为src。完整的工作示例 here .