Добавление изображения в объект окружности в d3 javascript?

Моя цель - добавить изображение в существующий круг с d3. Круг будет отображать и взаимодействовать с методом mouseover, но только когда я использую "fill", "color", а не что-то более сложное, например .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/. Любая помощь для получения моего логотипа в круге? Спасибо.

Ответ 1

Как говорит Ларс, вам нужно использовать шаблон, как только вы это сделаете, он станет довольно простым. Здесь ссылка на в d3 группах google об этом. Я создал fiddle здесь, используя изображение пинты из этой беседы и ваш код выше.

Чтобы настроить шаблон:

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

Ответ 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 "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;}
            });