D3如何放大保留在SVG矩形內的SVG文本？

我想放大一個裏面有文本的矩形。我使用getBBox()來確定文本的大小，然後根據該文本的大小繪製一個矩形。從那裏我嘗試添加縮放/平移功能。D3如何放大保留在SVG矩形內的SVG文本？

不幸的是，當您放大時，文本和矩形不會以相同的方式縮放。放大時，文字會過大，並且不會保留在矩形內。實際上，矩形似乎只能將文本封裝在默認縮放級別。

http://jsfiddle.net/9cWWW/1/

我不知道我是否應該縮放矩形或內部的其他文字。我試圖玩弄重繪功能，看看我是否可以用當前寬度的文本轉換大小，所以我會更新我的jsfiddle，如果我有任何進展。如果任何人都可以給我一些建議，我會很感激。

來源

2013-07-05 aug

在IE中正常工作（糾正後刪除多餘的' gilly3

嗯，我沒有嘗試在Firefox中...我不知道爲什麼它不在那裏工作，但我會看看如果我能弄明白。 – aug

您需要對和進行樣式設置，使其寬度爲100％，高度爲100％，並將外部

這是新的jsfiddle：http://jsfiddle.net/9cWWW/6/

的變化是需要這才能起作用：

IE：

顯然，我需要刪除多餘的<svg>元素我在追加時頂部。

火狐：

顯然，你需要設置SVG的width和height如下所示：

var svg = d3.select("body").append("svg:svg").attr("height","100%").attr("width","100%") 
      .call(d3.behavior.zoom().on("zoom", redraw)) 
       .append("g");

謝謝你這麼多gilly3告訴我這一點。

鉻：

顯然，你需要確保你指定font-size屬性：

var text = svg.append("svg:text") 
    .attr("x", 480) 
    .attr("y", 250) 
    .attr("dy", ".35em") 
    .attr("text-anchor", "middle") 
    .attr("font-size", nodeFontSize + "px") //<-- added 
    .text("This is the text I want to make zoomable");

希望這有助於大家！

來源

2013-07-08 18:02:57 aug

D3如何放大保留在SVG矩形內的SVG文本？

回答

相關問題