CSS 在 d3 javascript 中的圆形对象内添加图像？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19202450/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Adding an image within a circle object in d3 javascript?
提问by DeBraid
My goal is to add an image into an existing circle with d3. The circle will render and is interactive with mouseover method, but only when I use "fill", "color", and not something more sophisticated like .append("image").
我的目标是使用 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);
});
The image doesn't show after I mouse over. Using Ruby on Rails app, where my image "logo.jpeg" is stored in the assets/images/ directory. Any help for getting my logo to show within the circle? Thanks.
鼠标悬停后图像不显示。使用 Ruby on Rails 应用程序，其中我的图像“logo.jpeg”存储在 assets/images/ 目录中。让我的徽标显示在圆圈内有什么帮助吗？谢谢。
回答by user1614080
As Lars says you need to use pattern, once you do that it becomes pretty straightforward. Here's a link to a conversationin d3 google groups about this. I've set up a fiddlehere using the image of a pint from that conversation and your code above.
正如 Lars 所说，你需要使用模式，一旦你这样做了，它就会变得非常简单。这是d3 google 群组中有关此问题的对话的链接。我已经使用该对话中的品脱图像和上面的代码在这里设置了一个小提琴。
To set up the pattern:
要设置模式：
<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>
Then the d3 where we only change the fill:
然后是我们只更改填充的 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");
});
回答by Aravind Cheekkallur
nodeEnter.append("svg:image")
.attr('x',-9)
.attr('y',-12)
.attr('width', 20)
.attr('height', 24)
.attr("xlink:href", function(d) {
if(d.type=="root"){
return "resources/images/test.png";}
else if(d.type.toLowerCase()=="A"){
return "resources/icon01/test1.png";}
else if(d.type=="B"){
return "resources/icon01/test2.png";}
})
.append("svg:title")
.text(function(d){
if(d.type=="root"){
return "Root Name:"+d.name;}
else if(d.type=="test"){
return "Name:"+d.name;}
});
