[RUBY-ON-RAILS] D3 자바 스크립트에서 원 객체 내에 이미지를 추가?

D3 자바 스크립트에서 원 객체 내에 이미지를 추가?

내 목표는 D3와 기존 서클에 이미지를 추가하는 것입니다. 원 렌더링 및 마우스 오버 방법과 상호 작용하는,하지만에만 나는 "채우기", "색", 그리고으로 .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", "/assets/images/logo.jpeg")
                   .attr("cx", 700)
                   .attr("cy", 300)
                   .attr("height", 10)
                   .attr("width", 10);
         });

이미지를 통해 내가 마우스 후 표시되지 않습니다. 내 이미지 "logo.jpeg는"자산 / images / 디렉토리에 저장되어있는 레일 응용 프로그램에 루비를 사용. 원 내 쇼에 나의 로고를 얻기 위해 어떤 도움? 감사.

해결법

1. ==============================

   1.라스가 말한대로 당신이 매우 간단하게 그렇게되면 당신은 패턴을 사용합니다. 다음은 이에 대한 D3 구글 그룹에서 대화에 대한 링크입니다. 나는 그 대화에서 파인트 이상 코드의 이미지를 사용하여 여기에 바이올린을 설정했습니다.

   라스가 말한대로 당신이 매우 간단하게 그렇게되면 당신은 패턴을 사용합니다. 다음은 이에 대한 D3 구글 그룹에서 대화에 대한 링크입니다. 나는 그 대화에서 파인트 이상 코드의 이미지를 사용하여 여기에 바이올린을 설정했습니다.

   패턴을 설정하려면 :

       <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. ==============================

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

from https://stackoverflow.com/questions/19202450/adding-an-image-within-a-circle-object-in-d3-javascript by cc-by-sa and MIT license