使用url填充模式爲svg圈時圖像模糊

Question

我想用d3.js circle packing example填充一堆SVG的圖案填充圖像svg圈。我的源圖片爲800x600，但圓圈大小各不相同。我已經將它設置如下：

var patterns = defs.selectAll("pattern") 
     .data(nodes.filter(function(d){ return !d.children })) 
     .enter() 
     .append('pattern') 
     .attr('id',function(d){ 
     return 'id'+d.id 
     }) 
     .attr('x','0') 
     .attr('y','0') 
     .attr('height',function(d){ return d.r*2}) 
     .attr('width',function(d){ return d.r*2*1.333333}) 
     .append('image') 
     .attr('x','0') 
     .attr('y','0') 
     .attr('height',function(d){ return d.r*2}) 
     .attr('width',function(d){ return d.r*2*1.333333}) 
     .attr('xlink:href',function(d){ 
     return 'img/img' + d.image; 
     }) 

    var circle = svg.selectAll("circle") 
     .data(nodes) 
    .enter().append("circle") 
     .attr("class", function(d) { return d.parent ? d.children ? "node" : "node node--leaf" : "node node--root"; }) 
     .style("fill", function(d) { 
     if (!d.children){ 
      return 'url(#id' + d.id + ')'; 
     } else { 
      return d.children ? color(d.depth) : null; 
     } 

     }) 

讓自己的DOM呈現這樣的：

<defs id="cdef"> 
    <pattern id="id65" x="0" y="0" height="326.8534904318234" width="435.8045449579344"> 
     <image x="0" y="0" height="326.8534904318234" width="435.8045449579344" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="img/img65.png"></image> 
    </pattern> 
    ... 
</defs> 

但是當我這樣做，在圈內的圖像是超吹出（見附件圖片）。任何想法發生了什麼？

Answer 1

我想通了。

圖案元素的高度和寬度似乎具有類似於比例/百分比的功能。因此，「1」的寬度意味着它將填充它所設置的整個元素。 「.25」的寬度意味着該元素的25％。然後，<pattern>內，你會指定圖像，因爲它們填充圓的高度和寬度的實際像素值的高度和寬度，所以在這種情況下，我的代碼更改爲：

var patterns = defs.selectAll("pattern") 
     .data(nodes.filter(function(d){ return !d.children })) 
     .enter() 
     .append('pattern') 
     .attr('id',function(d){ 
     return 'id'+d.id 
     }) 
     .attr('x','0') 
     .attr('y','0') 
     .attr('height','1') 
     .attr('width','1') 
     .append('image') 
     .attr('height',function(d){ return d.r*2}) 
     .attr('width',function(d){ return d.r*2*1.333333}) 
     .attr('xlink:href',function(d){ 
     return 'img/img' + d.image; 
     }) 

和然後，因爲圓包佈局拉近，我必須確保要更改圖像的DEFS一樣，所以：如果修改上述bl.ocks.org例如需要

function zoomTo(v) { 
    var k = diameter/v[2]; view = v; 
    defs.selectAll('image').attr('width',function(d){ 
     return d.r*2*1.333333*k 
    }).attr('height',function(d){ 
     return d.r*2*k 
    }); 
    node.attr("transform", function(d) { return "translate(" + (d.x - v[0]) * k + "," + (d.y - v[1]) * k + ")"; }); 
    circle.attr("r", function(d) { return d.r * k; }); 


    } 

。