在d3 javascript中的圆形对象内添加图像？

我的目标是用d3将图像添加到现有的圆中。 圆形将呈现并与mouseover方法交互，但只有当我使用“填充”，“颜色”，而不是像.append（“图像”）更复杂的东西。

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", "/assetshttp://img.dovov.comlogo.jpeg") .attr("cx", 700) .attr("cy", 300) .attr("height", 10) .attr("width", 10); }); 

鼠标hover后，图像不显示。 使用Ruby on Rails应用程序，我的图像“logo.jpeg”存储在assets / images /目录中。 任何帮助让我的标志在圈内展示？ 谢谢。

Answer 1

正如拉尔斯所说，你需要使用模式，一旦你这样做，它变得非常简单。 这里有一个关于d3谷歌组的对话的链接。 我用这个对话的图片和上面的代码在这里设置了一个小提琴 。

build立模式：

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

Answer 2

 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 "resourceshttp://img.dovov.comtest.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;} });