D3.js動態縮放並在節點中定位圖像

是否可以根據節點大小動態定位和縮放圖像？D3.js動態縮放並在節點中定位圖像

我與具有動態調整大小的字體爲每個節點圈節點的工作：

node.append("text") 
     .attr("dy", ".2em") 
     .style("text-anchor", "middle") 
     .text(function(d) { return d.className; }) 
     .style("font-size", "1px") 
     .each(getSize) 
     .style("font-size", function(d) { return d.scale + "px"; }); 

function getSize(d) { 
    var bbox = this.getBBox(), 
     cbbox = this.parentNode.getBBox(), 
     scale = Math.min(cbbox.x/bbox.x, cbbox.y/bbox.y); 
    d.scale = scale; 
}

這是同樣的效果acheivable與PNG圖像？我們的目標是讓每個節點都擁有一個自動縮放並定位在我們當前文本上方的獨特圖像。

每張圖片大小相同，但內容不同。示例175px X 50px，並且可以向下擴展或達到適當的節點大小。像：
goalExample
但每個圖像將是唯一的節點就在目前，我一直在努力。

node.append("image") 
    .attr("xlink:href", "http://www.wepushbuttons.com.au/wp-content/uploads/2011/12/gimp-logo.png") 
    .attr("x", -8) 
    .attr("y", -100) 
    .attr("width", 16) 
    .attr("height", 16);

我當前的代碼（節點/文）動態調整大小以上圖像代碼不。我在想，有一種方法可以將IMAGE .attr("dy", ".1em")編碼在文本的正上方，並用this.getBBox()對其進行編碼。將寬度：175和高度：50縮放到適當的節點大小。

這可能嗎？

來源

2013-11-22 Understood

使用一種模式來創造出與父動態調整的模式/圖像，並將其設置爲填充：

<svg width="300" height="300"> 

    <defs> 
    <pattern id="image" width="1" height="1" viewBox="0 0 100 100" preserveAspectRatio="none"> 
     <image xlink:href="http://placekitten.com/200/300" width="100" height="100" preserveAspectRatio="none"></image> 
    </pattern> 
    </defs> 

    <circle id="catball" fill="url(#image)" r="60" cx="100" cy="100"/> 

</svg>

當您調整R，填充圖案也將擴大。

關鍵是使用viewBox attribute，設置爲與包含圖像相同的寬度和高度。由於我們只是要取決於父母無論如何要填充，我們只需將它們全部設置爲100

您可以在SVG圖形這裏讀了起來：http://www.w3.org/TR/SVG/pservers.html#Patterns

例瘋狂擴張貓在這裏：http://jsfiddle.net/nPwx3/

來源

2013-11-22 07:50:26 minikomi

我無法讓它與我的任何代碼一起工作。它可能是我，但這隻允許每個SVG 1個圖像。如果我錯了，我需要1個SVG中的每個節點1個圖像。 [經測試的代碼]（http://i.stack.imgur.com/6efCD.png「屏幕截圖」）不縮放，不在每個節點...我會更新我的請求/問題... – Understood

創建一個唯一的ID對於你想使用的每個圖像 - 請參閱圖案ID =「image1」，你可以有image2，image3，cute-cat ..無論你喜歡什麼。然後，將URL（＃{id name go here}）設置爲填充。 – minikomi

你是我的英雄!!!! – mbh86

D3.js動態縮放並在節點中定位圖像

回答

相關問題