D3 서클에 배경 이미지 추가 시도 중

Question

거품마다 과일 이미지가있는 다음 거품 형 차트를 만들려고합니다. 콘솔에서 오류가 발생하지 않고 콘솔에서 과일 이름을 올바르게 인쇄하고 있지만 과일 이미지가 표시되지 않습니다. 나는 무엇이 없는가. 나는 그것이 for 루프 안에 fill 속성을 추가한다고 말할지도 모른다라고 생각한다. 그러나 나는 성공없이 그 순서로 놀았다.

var diameter = 500, //max size of the bubbles 
    color = d3.scale.category20b(); //color category 

var bubble = d3.layout.pack() 
    .sort(null) 
    .size([diameter, diameter]) 
    .padding(1.5); 

var svg = d3.select("body") 
    .append("svg") 
    .attr("width", diameter) 
    .attr("height", diameter) 
    .attr("class", "bubble"); 

d3.csv("fruit.csv", function(error, data){ 

    //convert numerical values from strings to numbers 
    data = data.map(function(d){ d.value = +d["Amount"]; return d; }); 


    //bubbles needs very specific format, convert data to this. 
    var nodes = bubble.nodes({children:data}).filter(function(d) { return !d.children; }); 

    //setup the chart 
    var bubbles = svg.append("g") 
     .attr("transform", "translate(0,0)") 
     .selectAll(".bubble") 
     .data(nodes) 
     .enter(); 

    //create the bubbles 
    bubbles.append("circle") 
     .attr("id", function(d) { return d.Fruit; }) 
     .attr("r", function(d){ return d.r; }) 
     .attr("cx", function(d){ return d.x; }) 
     .attr("cy", function(d){ return d.y; }) 
     .style("fill", function(d) { return color(d.value); }); 

    //format the text for each bubble 
    bubbles.append("text") 
     .attr("x", function(d){ return d.x; }) 
     .attr("y", function(d){ return d.y + 5; }) 
     .attr("text-anchor", "middle") 
     .text(function(d){ return d["Fruit"]; }) 
     .style({ 
      "fill":"white", 
      "font-family":"Helvetica Neue, Helvetica, Arial, san-serif", 
      "font-size": "12px" 
     }); 

    var defs = svg.append("defs"); 

    var circles = document.getElementsByTagName("circle"); 

    for (var i = 0; i < circles.length; i++) { 

     var fruit = circles[i].id; 

     defs.append("pattern") 
      .attr("height","100%") 
      .attr("width", "100%") 
      .attr("patternContentUnits", "objectBoundingBox") 
      .append("image") 
      .attr("height",1) 
      .attr("width",1) 
      .attr("preserveAspectRatio","none") 
      .attr("xlink:href", fruit+".jpg"); 

     d3.select("#"+fruit) 
      .attr("fill", "url(#" + fruit + ")"); 

     console.log(circles[i].id); 

    } 

}) 

Answer 1

지금 코드의 문제는 당신이 <patterns> 모든 ID를 설정하지 않을 것입니다. 게다가

, 당신은 attr() 방법 ... style()를 사용

.style("fill", function(d) { return color(d.value); }); 

을 이전 fill을 무시하려고 설정하고 있습니다 :

이

.attr("fill", "url(#" + fruit + ")"); 

마지막으로, 그 제거 for 루프. 일반적으로 D3을 사용하여 요소를 추가/작성할 때 루프를 피하십시오.

var defs = svg.append("defs"); 

defs.selectAll(null) 
    .data(nodes) 
    .enter() 
    .append("pattern") 
    .attr("id", function(d){ 
     return d.Fruit 
    })//set the id here 
    .attr("height", "100%") 
    .attr("width", "100%") 
    .attr("patternContentUnits", "objectBoundingBox") 
    .append("image") 
    .attr("height", 1) 
    .attr("width", 1) 
    .attr("preserveAspectRatio", "none") 
    .attr("xlink:href", function(d) { 
     return d.Fruit + ".jpg" 
    }); 

bubbles.append("circle") 
    .attr("id", function(d) { 
     return d.Fruit; 
    }) 
    .attr("r", function(d) { 
     return d.r; 
    }) 
    .attr("cx", function(d) { 
     return d.x; 
    }) 
    .attr("cy", function(d) { 
     return d.y; 
    }) 
    .style("fill", function(d) { 
     return "url(#" + d.Fruit + ")"; 
    });//fill the circles according to the pattern's id