我的目标是使用d3将图像添加到现有圆中。圆圈将呈现并与鼠标悬停方法互动，但仅当我使用“填充”，“颜色”，而不是诸如.append（“ image”）之类的更复杂的东西时。
g.append("circle") .attr("class", "logo") .attr("cx", 700) .attr("cy", 300) .attr("r", 10) .attr("fill", "black") // this code works OK .attr("stroke", "white") // displays small black dot .attr("stroke-width", 0.25) .on("mouseover", function(){ // when I use .style("fill", "red") here, it works d3.select(this) .append("svg:image") .attr("xlink:href", "/assets/images/logo.jpeg") .attr("cx", 700) .attr("cy", 300) .attr("height", 10) .attr("width", 10); });
鼠标悬停后图像未显示。使用Ruby on Rails应用程序，我的图像“ logo.jpeg”存储在assets / images /目录中。有任何帮助让我的徽标显示在圈子中的帮助吗？谢谢。
正如Lars所说，您需要使用模式，一旦完成，它就会变得非常简单。这是d3Google网上论坛中与此相关对话的链接。
设置模式：
<svg id="mySvg" width="80" height="80"> <defs id="mdef"> <pattern id="image" x="0" y="0" height="40" width="40"> <image x="0" y="0" width="40" height="40" xlink:href="http://www.e-pint.com/epint.jpg"></image> </pattern> </defs>
然后在d3中，我们仅更改填充：
svg.append("circle") .attr("class", "logo") .attr("cx", 225) .attr("cy", 225) .attr("r", 20) .style("fill", "transparent") .style("stroke", "black") .style("stroke-width", 0.25) .on("mouseover", function(){ d3.select(this) .style("fill", "url(#image)"); }) .on("mouseout", function(){ d3.select(this) .style("fill", "transparent"); });
